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

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

  1. Renee says:

    Hello,

    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:
          http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

          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!
            /emil

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

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

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

    hi!

    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:

    Hi,

    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 */
    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 what­ever you called yours */
    display:inline-block; float:none;}

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

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

Lena is a highly-talented graphic designer and artist. The work she has done for me has been very cre­ative  and yet pro­fes­sional. She under­stands my likes and dis­likes when she designs mar­ket­ing mate­ri­als for me and  her under­stand­ing of tech­ni­cal issues, soft­ware pro­grams, and cross-platform of oper­at­ing sys­tems is a real asset.  She’s also fun to work with, you can’t beat that combination!

Kim McDougal

Designer

Kim McDougal

Lena Shore is one our favorite resource pro­fes­sion­als because she has such breadth and depth of  tal­ent — both design-wise and in tech­ni­cal skills. And she always approaches her work with a pos­i­tive attitude.

Mary Harvey

Agency Ala Carte

Mary Harvey

The great thing for me about work­ing with Lena, is that I can move fast, barely explain what I need and at the same time know in my heart that she will make it all okay. Over and over again she has cre­ated press-ready files that have turned into beau­ti­ful prod­ucts that my clients rave about. Lena helps in keep­ing me some­what sane in the crazy world of printing.

Christy King

Print Broker

Christy King