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;
}

Lena Shore

Lena is a full-time freelancer and nerd that specializes in web development, graphic design, and illustration. She enjoys building things, learning new things, pursuing creative endeavors, and giving free advice.

26 Comments

  1. Renee on October 9, 2012 at 3:24 pm

    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 on October 9, 2012 at 3:41 pm

      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 on October 9, 2012 at 3:44 pm

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



    • Lena Shore on October 9, 2012 at 4:08 pm

      Sometimes you have to kick it. (;



  3. Renee on October 9, 2012 at 4:10 pm

    So I see! Thanks again.



  4. emil on November 22, 2012 at 7:21 am

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



    • Lena Shore on November 26, 2012 at 7:40 am

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



      • emil on February 13, 2013 at 7:15 am

        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 on February 13, 2013 at 8:46 am

          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 on February 13, 2013 at 9:14 am

            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 on February 13, 2013 at 9:39 am

            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 on February 13, 2013 at 9:51 am

            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 on February 13, 2013 at 10:09 am

            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 on December 6, 2012 at 6:21 am

    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 on December 6, 2012 at 5:08 pm

      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 on December 6, 2012 at 5:12 pm

        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 on February 13, 2013 at 8:43 am

          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 on March 8, 2013 at 12:23 pm

    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 on May 29, 2013 at 12:05 am

    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;
    }



    • Lena Shore on May 29, 2013 at 10:35 am

      Juana – can you give me a link of the site to review? Either via email or this thread. (:



  8. Juana on May 29, 2013 at 7:44 pm

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



    • Lena Shore on May 30, 2013 at 1:35 pm

      I just emailed you. I tried it and got it to work (though you need some adjusting). I think the problem is you have some CSS code that is from the current navigation that needs to be removed/commented out from the style.css file. (:



      • Robert on July 8, 2014 at 9:37 am

        Lena, where exactly do I need to put this CSS code? I’ve already cre­ated the menu..



        • Lena Shore on September 22, 2014 at 2:46 pm

          Robert – see response below.



  9. Robert on July 3, 2014 at 6:03 pm

    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 on September 22, 2014 at 2:45 pm

      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.



Archives