WordPress CSS: How to create an automatically evenly spaced menu

Here is a method to create a WordPress menu using CSS to keep all of the navigation items spread out and even, no matter how many navigation items you have.

  1. Create your menu using WordPress’ built in menu system.
  2. Add an extra custom link at the end of the menu with # for the URL. Name it anything you want, but name it something meaningful so you’ll remember why it is there 3 months later. This must be in the last position of the menu.
  3. Use the following CSS code and pay attention to the commented areas of the CSS code and update to reflect the width and name of your specific menu:
    • Change “menu-mainmenu” to whatever you called your menu. You can look at the source code of your website to find this. Even easier if you use Firefox’s Firebug or Safari’s built in Code Inspector.
    • Change the width from 990px to whatever the width is of your menu.
    • “menu-item-1470″ is the last “filler” menu item you added to your menu. Change the name of it to reflect the name of yours.

ul#menu-mainmenu { /* Change the name of menu to whatever you called yours */
text-align:justify;
width:990px; /* Change the width to match the width of your menu */
margin:0 auto;}

ul#menu-mainmenu li { /* Change the name of menu to whatever you called yours */
display:inline-block; float:none;}

#menu-item-1470 { /* Change the name of this nav button to yours */
width:100%;
display: inline-block;
height:0px;
}

#menu-item-1470 a, #menu-item-1470 a:hover{ /* Change the name of these nav buttons to yours */
display: none;
}

26 Responses to WordPress CSS: How to create an automatically evenly spaced menu

  1. Renee says:

    Hello,

    I tried this and it ALMOST works perfectly. That placeholder shows even though the code says display: none. Please advise what to do. The site is 7smr dot org.

    • Lena Shore says:

      I see this: #menu-item-187 a, #menu-item-187 a:hover {display: none;}
      TRY: #menu-item-187 a, #menu-item-187 a:hover {display: none !important;}

  2. Renee says:

    Perfect!!! Thank you SOOOOOOO much!!!!!!

  3. Renee says:

    So I see! Thanks again.

  4. emil says:

    Gr8 stuff, but I don’t get it to work in explorer 7?

    • Lena Shore says:

      I wouldn’t expect it to work in IE7. You are probably best making an exception for that browser in the CSS.

      • emil says:

        Ok, I understand!
        Would u like to give me a hint for css to put into ?
        Cause i’m not really sure on how to do it.

        And also as edward asks below: Why is the height on the menu changing (with 20px, in my case)?

        Thank you /emil

        • Lena Shore says:

          Here is a great link that explains conditional stylesheets:
          http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

          My guess with your menu height changing is due to one of two things. Either you have some padding or margin applied to it (if you had a 20px menu, but each a:link had 5px on the top and bottom, your height would really end up 30px) OR your menu is wrapping around and doubling the space.

          • emil says:

            Thanks for getting back so fast :)
            I know how to attach another stylesheet for lte ie7. Just not how to “disable” the last menu-item in a neat way via css. Or is there any other options?

            I also need the same function to make it work in responsive web. Or could I maybe use “max-width” instead of “width”?

            Thanks again!
            /emil

          • Lena Shore says:

            You can use something like this –> #cssmenu ul li:last-child {}
            However older IE doesn’t like it. You are better off using the ID from that specific menu link.

            I haven’t tried this with a responsive web page – but “max-width” sounds like a good idea.

            (:

          • emil says:

            max-width worked fine for responive :)

            Hmm. Ok.. li:last-child {do-wut?}

            About the height, it depends on the last menu-item that I added, it pops down under the menu and therefore the xtra height. I tryed to shorten the “menu name”, change height, line-height, font-size, etc but no success :(

          • Lena Shore says:

            last-child says “make the last element do this”. In this case it is targeting the li of your ul. Doesn’t matter anyway, I think you should just use the menu ID since IE hates it.

            Check the width of your menu (ul). I bet it has margin or padding on it. Use Firebug browser add-on to see it more easily.

  5. Edward says:

    Hi!

    This looks great but I can’t seem to get it too work. Would you have any tips?

    Any advice would be greatly appreciated.

    Cheers.

    • Lena Shore says:

      Can you be more specific about what isn’t working? Or how it’s working/not working? Is it working in some browsers and not others?

      • Edward says:

        My apologies, a terrible description.

        In both firefox and Safari the Menu bar becomes slightly taller but the items do not become evenly distributed.

        The website is http://www.atkinsonengineering.com.au (which still has much development to come), naturally what I am trying to achieve is evenly using the whole of the menu bar.

        Please let me know if I can provide any other information. I am overwhelmed by your assistance.

        Regards,

        Ed.

        • Lena Shore says:

          Ed,

          I am so sorry for the slow response. I only just saw your reply. I don’t know why I didn’t get notified.

          It looks like you may have your problem fixed. The only think you might want to do is widen your tag. I see that it has some margin on the right that is preventing it from going all the way across. If you look at it with the Firefox extension, Firebug, you can see it more easily when clicked on. But, I think if you created a new CSS rule like this: ul.menu-main {margin-right: 0;} that might fix it.

  6. Ricardo says:

    hi!

    Everything works great except i get a bit of unwanted spacing between the buttons. Not sure if thats my css or your code but maybe you’ve seen this before.

    If highlighted all the buttons and its pretty obvious that there is some white space in between them. http://hansdejongtax.com/

    Much thanks in advance!

  7. Juana says:

    Hi,

    I need help. I had trouble with the placeholder showing and now its hidden thanks to following your reply to the other user but my menu isn’t spaced out at all…it didn’t change (I have a responsive wordpress theme). Here’s what I have:

    ul#menu-uppercase-menu { /* Change the name of menu to whatever you called yours */
    text-align:justify;
    max-width:990px; /* Change the width to match the width of your menu */
    margin:0 auto;}

    ul#menu-uppercase-menu li { /* Change the name of menu to whatever you called yours */
    display:inline-block; float:none;}

    #menu-item-2026 { /* Change the name of this nav button to yours */
    max-width:100%;
    display: inline-block;
    height:0px;
    }

    #menu-item-2026 a, #menu-item-2026 a:hover{ /* Change the name of these nav buttons to yours */ display: none !important;
    }

  8. Juana says:

    Hi, I submitted the site address through contact me on your page.

  9. Robert says:

    Can someone help me out with this? Where exactly do I need to put this CSS code? I’ve already created the menu..

    • Lena Shore says:

      Robert – I am so sorry I didn’t respond to you quicker. Your message hit the spam filter and I didn’t get notified.

      You would put this code in any of of the css files you are using. If (for instance) you were using a basic theme, you’d find the CSS file inside that themes’ folder or you could go to Appearance –> Editor. Look for style.css although, it can be named other things.

Leave a reply

What people are saying...

Interested in working with Lena? Check out some of her client testimonials below!

In designing a website, Lena “gets it”. I can feel confident that when I’m not able to communicate what I need with the correct lingo, she can still determine what I’m trying to accomplish  and will offer up suggestions on how to meet those objectives.

Carolyn Klucha

Owner, CK Direct

Carolyn Klucha

Our organization has been so happy with Lena work.  Lena’s designs are very creative and  original.  Unlike many other designers, Lena’s don’t look like clip art! I like that we can verbally explain  what we want and she seems to create the visual interpretation perfectly! We look forward to working with  her for years to come.

Jeri Millard

Owner, In the Pink

Jeri Millard

Lena has a rare combination of reliable work habits and creative talent. With designers, you usually have to trade one for the other, but Lena allows me to please my clients with great work,  delivered on time. She has been an essential part of my own business success.

Patricia Ponder

Got Lucky Communications

Patricia Ponder