WordPress CSS: How to create an automatically evenly spaced menu

by Lena Shore · 22 comments

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

Article by Lena Shore

{ 22 comments… read them below or add one }

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

Reply

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

Reply

Renee October 9, 2012 at 3:44 pm

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

Reply

Lena Shore October 9, 2012 at 4:08 pm

Sometimes you have to kick it. (;

Reply

Renee October 9, 2012 at 4:10 pm

So I see! Thanks again.

Reply

emil November 22, 2012 at 7:21 am

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

Reply

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

Reply

emil 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

Reply

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

Reply

emil 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

Reply

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

(:

Reply

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

Reply

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

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

Reply

Lena Shore 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?

Reply

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

Reply

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

Reply

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

Reply

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

Reply

Lena Shore 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. (:

Reply

Juana May 29, 2013 at 7:44 pm

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

Reply

Lena Shore 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. (:

Reply

Leave a Comment

Previous post:

Next post: