WordPress CSS: How to create an automatically evenly spaced menu
May 14, 2012 / Updated: May 14, 2012 / Lena Shore
Filed under: Web Development, Wordpress
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.
- Create your menu using WordPress’ built in menu system.
- 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.
- 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;
}
Only wanna remark that you have a very nice website , I the layout it actually stands out.
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.
Hi, I submitted the site address through contact me on your page.
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. (:
Lena, where exactly do I need to put this CSS code? I’ve already created the menu..
Robert – see response below.
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;
}
Juana – can you give me a link of the site to review? Either via email or this thread. (:
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!
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.
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.
Gr8 stuff, but I don’t get it to work in explorer 7?
I wouldn’t expect it to work in IE7. You are probably best making an exception for that browser in the CSS.
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
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.
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.
So I see! Thanks again.
Perfect!!! Thank you SOOOOOOO much!!!!!!
Sometimes you have to kick it. (;
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;}