image menu bar

  • Author
    Posts
  • #1332069

    ateaoscemxs
    Member

    Hi there!
    My blog is http://ateaoscem.com

    I want to put a little picture in the menu bar (Início, Sobre nós, Contactos, …). In each “li”.
    I have to put an image address in “li class”? Or in div class?

    Thank you.

    The blog I need help with is ateaoscem.com.

    #1332209

    I would add the picture to the “a” tag so that they are also clickable.

    Here is an example of adding a background image to the left of each main menu item on the Sundance theme.

    .main-navigation li a {
    	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
    	padding-left: 40px;
    }

    I used a WordPress image in the example, and you can replace the url() value with a link to a different image instead.

    #1332305

    ateaoscemxs
    Member

    I want to put this image in the bacground:

    at the center of each menu title.

    I tryed this:

    .main-navigation li a {
    color: #792900;
    font-weight: bold;
    text-align: center;
    font-family: ‘Swanky and Moo Moo’, cursive;
    background: url(http://imageshack.us/a/img10/139/uvn1.png) center no-repeat;
    padding-top:25px;
    padding-bottom:45px;
    padding-right:25px;
    padding-left:25px;
    }

    But words are always out of the picture.
    I have increased the length of the image, but even so, the words are never within the image.

    It look like this:

    Thank you a lot!

    #1332344

    But words are always out of the picture.

    For some reason, this image is really tiny and I can’t really see what’s happening there: http://img402.imageshack.us/img402/6784/b0p3.jpg

    However, I tested the CSS you posted, and I think changing “no-repeat” to “repeat-x” on the “background” line might help. Can you try that?

    #1332345

    ateaoscemxs
    Member

    Yes!
    It works!
    One more thing:
    There are possibility to put a little space between each one?

    #1332346

    ateaoscemxs
    Member

    Can you see this image?

    I have a “sub-menu” in the menu “Livro” de Receitas.

    How can you see in the image link, the list appear with a lot of squares!

    How can i solve it?

    Thank you!

    #1332352

    There are possibility to put a little space between each one?

    Just add padding to one side to the other of the “li” element. Here’s an example:

    .main-navigation li {
    	padding-right: 1em;
    }

    Adjust it as needed.

    #1332353

    Can you see this image?

    I’m sorry but this image link is too small to view. Does it work for you when you click on it in a browser? http://img9.imageshack.us/img9/1535/n9cy.png

    Maybe you could upload screenshots to your blogs media library instead: http://en.support.wordpress.com/make-a-screenshot/

    #1332354

    How can you see in the image link, the list appear with a lot of squares!

    How can i solve it?

    Try resetting some of the styles for just the submenus. Here is an example to get you started.

    .main-navigation div ul li li a {
    	background: #37373f;
    	color: #792900;
    	font-weight: normal;
    	text-align: center;
    	padding: 10px;
    }
    
    .main-navigation ul ul {
    	background: none;
    	top: 80px;
    }
    #1332358

    ateaoscemxs
    Member

    About the space between each one, i tryed

    .main-navigation li {
    padding-right: 1em;
    }

    it solves, yes.
    But the menu bar is not centered on the page.

    I tryed too add

    padding-left: 1em;

    but does not solve.

    Try one of this link’s please:

    #1332376

    ateaoscemxs
    Member

    Hi again!

    I already made the changes as you can see on the website.
    http://ateaoscem.com
    However, I want to put the menu bar over the center of the blog
    How can I do this?

    Another question:
    When the list “Cookbook” opens, you will see a brown line on the right side.
    Why do there appear, and how can I withdraw?

    Thank you!

    #1332377

    ateaoscemxs
    Member

    I tryed this, and works:
    (thus, it is made to force)

    .main-navigation {
    margin: 0 0 0 50px;
    }

    Is there any automatic way to do this?

    #1332378

    justpi
    Member

    This doesn’t center the menu, because the theme doesn’t have a fixed width: it stretches and shrinks, to adapt to different screen resolutions and devices.
    To really center the menu, turn the above to margin: 0; and add the following:

    .main-navigation ul {
        text-align: center;
    }
    .main-navigation li {
        display: inline-block;
        float: none;
    }
    .page-item-84 {
        padding-right: 0;
    }

    #1332379

    justpi
    Member

    Or, better, don’t use this:

    .page-item-84 {
        padding-right: 0;
    }

    And turn this addition of yours:

    .main-navigation li {
        padding-right: 0.5em;
    }

    to:

    .main-navigation li {
        padding: 0 0.25em;
    }

    #1332380

    ateaoscemxs
    Member

    Hi!

    Thank you!

    I did it, mas it does not work.

    You can see it in website.

    http://ateaoscem.com

    #1332381

    justpi
    Member

    I don’t know what you did, but none of my suggestions has been added to your custom CSS. No only that, several of your own previous additions are now missing. (For the most glaring example, where are the bg images to the menu items?)

    #1332382

    ateaoscemxs
    Member

    I already have my code very confusing.
    But now I’ve got to do what you told me.

    Now I can make all other changes to the layout

    Thank you a lot!

    #1332383

    justpi
    Member

    And I don’t know what you did next, but now the changes are all there.
    You’re welcome!

The topic ‘image menu bar’ is closed to new replies.