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

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

      • 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

          • 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

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

            (:

          • 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 :(

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

    • 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?

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

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

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

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

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

    • 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!

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

Lena is a highly-talented graphic designer and artist. The work she has done for me has been very creative  and yet professional. She understands my likes and dislikes when she designs marketing materials for me and  her understanding of technical issues, software programs, and cross-platform of operating systems is a real asset.  She’s also fun to work with, you can’t beat that combination!

Kim McDougal

Designer

Kim McDougal

Even though my site has been up and running for nearly 6 months, Lena is still available for  adjustments and questions. She is always helpful and always fixes my problem in a timely and friendly manner.  My website works wonderfully, looks great, and my business is growing like crazy.

Natalie Boren

Lullabooks

Natalie Boren