Need help? Check out our Support site, then


image menu bar

  1. 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.

  2. 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.

  3. I want to put this image in the bacground:

    http://imageshack.us/a/img10/139/uvn1.png

    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:

    http://img402.imageshack.us/img402/6784/b0p3.jpg

    Thank you a lot!

  4. 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?

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

  6. Can you see this image?

    http://img9.imageshack.us/img9/1535/n9cy.png

    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!

  7. 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.

  8. Can you see this image?

    http://img9.imageshack.us/img9/1535/n9cy.png

    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/

  9. 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;
    }
  10. 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:

    http://imageshack.us/photo/my-images/706/sg7n.jpg

    http://imageshack.us/a/img706/5726/sg7n.jpg

  11. 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!

  12. 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?

  13. 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;
    }
  14. 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;
    }
  15. Hi!

    Thank you!

    I did it, mas it does not work.

    You can see it in website.

    http://ateaoscem.com

  16. 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?)

  17. 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!

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

Topic Closed

This topic has been closed to new replies.

About this Topic