WordPress CSS: How to create an automatically evenly spaced menu

Here is a method to cre­ate a Word­Press menu using CSS to keep all of the nav­i­ga­tion items spread out and even, no mat­ter how many nav­i­ga­tion items you have.

  1. Cre­ate your menu using Word­Press’ built in menu system.
  2. Add an extra cus­tom link at the end of the menu with # for the URL. Name it any­thing you want, but name it some­thing mean­ing­ful so you’ll remem­ber why it is there 3 months later. This must be in the last posi­tion of the menu.
  3. Use the fol­low­ing CSS code and pay atten­tion to the com­mented areas of the CSS code and update to reflect the width and name of your spe­cific menu:
    • Change “menu-mainmenu” to what­ever you called your menu. You can look at the source code of your web­site to find this. Even eas­ier if you use Firefox’s Fire­bug or Safari’s built in Code Inspector.
    • Change the width from 990px to what­ever 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 */
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 */
display: inline-block;

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

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

  1. Renee says:


    I tried this and it ALMOST works per­fectly. That place­holder shows even though the code says dis­play: 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 {dis­play: none;}
      TRY: #menu-item-187 a, #menu-item-187 a:hover {dis­play: none !important;}

  2. Renee says:

    Per­fect!!! 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 prob­a­bly best mak­ing an excep­tion for that browser in the CSS.

      • emil says:

        Ok, I under­stand!
        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 chang­ing (with 20px, in my case)?

        Thank you /emil

        • Lena Shore says:

          Here is a great link that explains con­di­tional stylesheets:

          My guess with your menu height chang­ing is due to one of two things. Either you have some padding or mar­gin applied to it (if you had a 20px menu, but each a:link had 5px on the top and bot­tom, your height would really end up 30px) OR your menu is wrap­ping around and dou­bling the space.

          • emil says:

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

            I also need the same func­tion to make it work in respon­sive web. Or could I maybe use “max-width” instead of “width”?

            Thanks again!

          • Lena Shore says:

            You can use some­thing like this –> #css­menu ul li:last-child {}
            How­ever older IE doesn’t like it. You are bet­ter off using the ID from that spe­cific menu link.

            I haven’t tried this with a respon­sive 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 there­fore the xtra height. I tryed to shorten the “menu name”, change height, line-height, font-size, etc but no suc­cess :(

          • Lena Shore says:

            last-child says “make the last ele­ment do this”. In this case it is tar­get­ing the li of your ul. Doesn’t mat­ter any­way, I think you should just use the menu ID since IE hates it.

            Check the width of your menu (ul). I bet it has mar­gin or padding on it. Use Fire­bug browser add-on to see it more easily.

  5. Edward says:


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

    Any advice would be greatly appreciated.


    • Lena Shore says:

      Can you be more spe­cific about what isn’t work­ing? Or how it’s working/not work­ing? Is it work­ing in some browsers and not others?

      • Edward says:

        My apolo­gies, a ter­ri­ble description.

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

        The web­site is http://www.atkinsonengineering.com.au (which still has much devel­op­ment to come), nat­u­rally what I am try­ing to achieve is evenly using the whole of the menu bar.

        Please let me know if I can pro­vide any other infor­ma­tion. I am over­whelmed by your assistance.



        • Lena Shore says:


          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 prob­lem fixed. The only think you might want to do is widen your tag. I see that it has some mar­gin on the right that is pre­vent­ing it from going all the way across. If you look at it with the Fire­fox exten­sion, Fire­bug, you can see it more eas­ily when clicked on. But, I think if you cre­ated a new CSS rule like this: ul.menu-main {margin-right: 0;} that might fix it.

  6. Ricardo says:


    Every­thing works great except i get a bit of unwanted spac­ing between the but­tons. Not sure if thats my css or your code but maybe you’ve seen this before.

    If high­lighted all the but­tons and its pretty obvi­ous that there is some white space in between them. http://hansdejongtax.com/

    Much thanks in advance!

  7. Juana says:


    I need help. I had trou­ble with the place­holder show­ing and now its hid­den thanks to fol­low­ing your reply to the other user but my menu isn’t spaced out at all…it didn’t change (I have a respon­sive word­press theme). Here’s what I have:

    ul#menu-uppercase-menu { /* Change the name of menu to what­ever you called yours */
    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 what­ever you called yours */
    display:inline-block; float:none;}

    #menu-item-2026 { /* Change the name of this nav but­ton to yours */
    dis­play: inline-block;

    #menu-item-2026 a, #menu-item-2026 a:hover{ /* Change the name of these nav but­tons to yours */ dis­play: none !impor­tant;

  8. Juana says:

    Hi, I sub­mit­ted the site address through con­tact me on your page.

    • Lena Shore says:

      I just emailed you. I tried it and got it to work (though you need some adjust­ing). I think the prob­lem is you have some CSS code that is from the cur­rent nav­i­ga­tion that needs to be removed/commented out from the style.css file. (:

Leave a reply

What people are saying...

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

Great web host­ing. Good tech­ni­cal sup­port, 24/7. Almost.

Richard Robertson

Software Engineer and All Around Good Guy

Richard Robertson

Prompt, Pro­fes­sional, Per­fec­tion­ist… a plea­sure to work with!

Sharon Woods

Owner, Abba Printing Co., Inc.

Sharon Woods

Lena Shore has done a won­der­ful job for us — from brochures to busi­ness cards to the devel­op­ment of logos. She is prompt and pro­fes­sional and has a beau­ti­ful eye for art and the needs of the indi­vid­ual client.

Sarah Skinner, DVM

Mobile Veterinarian

Sarah Skinner, DVM