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

          • 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 has always made time to take care of any size job needed in a very timely matter.

Troy Demel

Signs Above the Rest, Inc.

Troy  Demel

Lena has a rare com­bi­na­tion of reli­able work habits and cre­ative tal­ent. With design­ers, you usu­ally have to trade one for the other, but Lena allows me to please my clients with great work,  deliv­ered on time. She has been an essen­tial part of my own busi­ness 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 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