Need help? Check out our Support site, then


Modify space between menu items

  1. biancajadeblog
    Member

    Hi!
    I have the custom design upgrade and using the Twenty Eleven theme. I would like to decrease the spacing between the nav items as well decrease the spacing between nav items and margins so I can fit more menu items on a single line. I've tried plugging in a couple different recommendations into the CSS but it doesn't seem to change anything at all. I'm not sure why the CSS isn't working?

    Thanks!

    The blog I need help with is healingtimes.wordpress.com.

  2. First off, CSS is theme specific, so the code you may have been finding might not have been for the theme you are using.

    Start by adding this and adjusting the right padding. If you take it down to zero, then delete the "em" and just have the 0.

    #access a {
    padding-right:1.2125em;
    }
  3. biancajadeblog
    Member

    I placed the code you suggested into the CSS and nothing changed. I'm not sure why no matter what I place into the CSS nothing changes at all?

    Many Thanks!

  4. First, make sure to adjust the "1.2125em" number to something smaller as instructed.

    Second, make sure you don't place the new CSS inside a CSS comment. In CSS, comments appear inside marks like "/*" and "*/" for example:

    /* This is a CSS comment. */

    You can remove the default CSS comment from your Appearance → Custom Design → CSS editor and just add the new CSS from above (except adjusted!) to make the change work.

  5. biancajadeblog
    Member

    This is what it looks inside of my CSS
    /*
    #access a {
    padding-right:0;
    }

    */
    And nothing is changing?
    Thanks:)

  6. biancajadeblog
    Member

    It seems like no matter what code I try nothing changes at all on my blog. Is it possible that there is something else that is over-riding any changes made in CSS that I am missing?

  7. /*
    #access a {
    padding-right:0;
    }

    */

    That is a comment!

    Try this instead:

    #access a {
    padding-right:0;
    }
  8. Gotcha! Worked like a charm:)

    How can I reduce the space in between paragraphs?

    Also, when I hover over the nav items the hover box has a lot of space on the left and not the right. Is there a way to make it directly in the center?

    Thanks so much!

  9. It looks like you found the paragraph spacing.

    Not sure what you mean on the menu hover box. Can you explain further please?

  10. biancajadeblog
    Member

    I've got everything looking the way I want, except I have one small issue. The navigation menu is exactly how I want it on the home page, but if I go to any other page it shifts and the last menu item moves underneath. Any suggestions?

    Thanks!

  11. The reason it goes to the second line when you click on, say, dōTERRA Essential Oils, is that the "current" page item is differentiated in the menu by bold styling. The bold styling on longer menu labels makes enough difference in the length of the text to force the end menu item to the next line. Add this to the end of your custom CSS. It widens the available area for menu tabs by a little bit (5.6% left and right margins instead of 7.6%).

    #access div {
    margin: 0 5.6%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic