Genesis by StudioPress is the most stylish, simplest to use and easiest to customize theme framework I have ever seen. But try to centre the horizontal navbars…
I spent months working out how to center Genesis menus. Different devices like mobile phones, desktops and tablets and every operating system like Linux, Windows, Unix and MacOS have their own way of rendering padding, margin and font sizes.
I tried centering the menus with Javascripts and PHP scripts to serve different menus with different padding and margin settings to visitor’s according to their operating system and device type. This worked… most of the time.
But I couldn’t take chances with the sites I build for my clients so I searched and researched and dug deeper into my brain until I found a final solution.
That solution is CSS. No scripts. Just CSS. Talk about overlooking the obvious. I tried CSS initially but it didn’t work because desktops, tablets, mobile devices and operating systems treat padding, margin and font-size values differently.
What I had partly forgotten is that it is easier to horizontally center content within table cells. What I had completely forgotten is that browsers can be told to treat divs as table cells. If that means nothing to you, don’t worry. Just follow the instructions on the tin.
How to Center the Genesis Menus
All CSS can be added to either your child theme’s CSS file (style.css) or to the Genesis theme settings where it says Enter scripts or code you would like output to wp_header().
There are two methods you can use to center the Genesis menu. If your theme is up to date and the child theme is recent, you center the nav menu by adding this to your theme’s CSS:
/* Center Primary Nav Bar */
#nav ul.genesis-nav-menu {
float: none;
}
#nav .genesis-nav-menu {
text-align: center;
}
/* Center Secondary Nav Bar */
#subnav ul.genesis-nav-menu {
float: none;
}
#subnav .genesis-nav-menu {
text-align: center;
}If the above doesn’t work, remove it and use the following instead:
<style tyle="text/css">
/* Center Primary Nav Bar */
#nav .wrap {
margin-left: auto;
margin-right: auto;
display:table;
}
#nav {
text-align:center
}
#nav li li {
text-align:left;
}
#nav ul {
display:table-row;
}
#nav li {
display:table-cell;
}
</style>And remember the IE compatibility CSS:
<!--[if lt IE 8]>
<style type="text/css">
#nav ul {display:inline-block;}
#nav ul{display:inline; }
#nav ul li{display:inline-block}
#nav ul li{ display:inline;}
#nav ul a{ display:inline-block;}
#nav{text-align:center}
</style>
<![endif]-->Save the settings, clear your browser cache and/or WordPress cache then reload the page. The menu will now be centered in every device and every operating system.
After months of trying scripts, it turns out to be that simple!
If you are using a subnav, change #nav to #subnav in the above CSS.
If you are using both the top menu and the bottom menu, use two versions of the CSS: one for #nav and one for #subnav. It is possible to write it as, for example, #nav .wrap, #subnav .wrap {} etc… to minimize page sizes. Let me know if you need help.
I’ll be slapping myself on the back of my head for a few minutes. Don’t mind the screams of “You idiot!” coming from my room.
Thanks goes to pmob.co.uk for reminding me that CSS can be used to force web browsers to treat divs as table cells.
Share this page with your friends on Facebook and Twitter so they can benefit from this too.
Followed your directions for some reason after adding the last script I get a big white box and no menu. Any ideas?
Post me a link to the site and I will check whether the menu is hiding somewhere. Which browser are you using and which theme is it?
Completely new method. Pure CSS, no scripts. To answer your question, though, the white box will have been caused by missing styling attributes. The method is (so far) flawless.
I’m using safari or chrome.
Great article man. Somehow it mostly worked but then it didn’t. lol I’ve been trying to get this effect done without padding and specific margins and your solution should have worked for me but for some reason it didn’t. Had to go back to padding by pixels. But I will revisit this after this project is out the door.
Hi Oscar, have a look at the new method. It’s simpler and sooo much easier to implement :)
Thanks Lee! I’ll check it out. Thanks for the update.
Thank you so much! I’ve been struggling with this issue for a while and hadn’t found a satisfactory solution. Yours worked!
Tisha, I’m glad to share. Thanks for your feedback.
Thanks for the tip, it didn’t work but it lead me down the right path. to center the menu items just add the following code to your stylesheet:
#nav li {
float: none;
list-style-type: none;
width: 150px;
}
you may have to adjust the width but it will work I promise!
Check again in a different device using a different OS. Setting a defined width only works in the devices that render pixels, percentages, ems or whatever the unit in the same way. That’s the reason I developed the method shown above.
If the above method didn’t work for you then your theme probably uses different class and ID names for the navbar elements. Use the Web Developer plugin in Firefox to establish what they might be then make the necessary changes to the CSS shown in the post above.
Allen, thank you for sharing your experience. I will take a look at your site’s CSS if you would like me to.
Thank you!!!! Worked like a charm.
Thanks, this worked really well. I’m wondering, though, how to set the width. When I attempted to do this, it aligned it all left again.
Hi Elaine, i’ve been on vacation and not watching the site. Post me a link and I’ll take a look.
Thanks Lee. The site is http://www.mylifesuchasitis.com.
I’m looking at the site now. The menu is aligned left. If you center it for me I will be better able to make the width adjustment. What width do you need it to be?
I’ve been pulling my hair over this issue for weeks now. I was going for a CSS-only solution from the get-go but none of the obvious fixes worked. Thanks for your solution! I just modified your rules by removing “white-space:nowrap;” to suit my needs.
I’ve added the code, but my menus are still not centering http://174.132.156.194/~vitalia/
Any advice? And thank you for the code, I’ve been struggling to find such a solution for months.
Hi Michelle. Love what you’ve done with the theme. Looks great. For the menu, this menu seems to be coded differently from the regular Genesis menu. You might need to edit it to add an additional wrapper. As a quick fix (kind of fix), you can simply set a width for #nav .wrapper. Something like:
#nav .wrap {
width: 90%;
}
I’m not saying it will work in all devices but it should approximate a central appearance in most devices.
Thanks Lee for the assistance. I’m using the Outreach theme so I’d suspect it is coded differently. And thank you for the compliment. I wish I could take credit for the design but sadly I cannot. :) I do psd to genesis conversions for a couple of graphic designers.
Thanks again!
You’re welcome, Michelle. I apologize for not replying sooner, I’m on vacation. From time-to-time I get clients who require artwork for their sites. If you do graphic design work then please send me a message at leehodson – a.t – vizred.com to let me know more of what you do. My business site is http://vizred.com. Thanks Michelle :)
I’ll pass this information on to the actual graphic designer of the site, I’m just the code monkey. :)
Code monkeys are useful too :p
Do you write and edit plugins?
BRILLIANT! Thanks so much!
Great! I find it works but when you re-size the browser window the menu doesn’t stack and become 2 or 3 lines deep to accommodate the links that can’t be viewed on the narrower widths.
having the same issue, would love to see a solution
I’m not sure how we might fix that. Maybe use a script to detect browser width to determine the CSS used to display the menu.
Get rid of
white-space:nowrap; from your header CSS.
And then add !important to display: inline-block;
@media only screen and (max-width: 960px) {
.menu-primary li,
.menu-secondary li,
#header ul.menu li {
display: inline-block!important;
… }
}
It would be great if Studiopress find out about this because it took me ages to work out and it really should be easier.
Thank you, Rob. This is very helpful.
I know the method I’ve written is referred to in the StudioPress forums. I’d like to see menu justification/float made an integral part of Genesis. Maybe one day….
I’d like to see that too :)
I can’t find where it says ” Enter scripts or code you would like output to wp_header():” in either the Genesis theme (which cautions to not tamper with) or the Agency child theme (which I’d rather edit). Thanks.
Uh oh — I found something similar to “enter scripts…” in the php section, and did that, but now that whole page and the entire site is one blank white screen. What do I do? Thanks.
Hi Chaz, I’m very sorry for my late reply. I’m still in Miami and haven’t been checking comments so much. Will be back to normal in a few weeks.
I hope you’ve already solved this but if not send me an email at leehodson (at) vizred.com and I’ll fix it for free as way of apology for my late reply. I suspect you’ve missed part of the code or not properly installed the code. You’ll need to edit it in the site’s database to fix it now or you can quickly fix the site by disabling the theme via changing ‘genesis’ to ‘xgenesis’ in wp-content/themes/genesis.
Please let me know whether this is already fixed or not.
Any reason adding position:fixed to #nav would throw it to the left?
Without checking, there is probably a float: left your theme’s #nav CSS.
Could really use some help! Did everything like you said, worked fine when I first stating my site and I only had 1 page on my nav bar to test it, but now that I am starting to get pages pages done and on the nav bar, for some reason, no matter how many items are on the nav bar, whether it is 3 or 20, the last link always displays on a second row??? There is plenty of room on that line and if I had a new page on the bar, the link that was last goes back up next to the others, and the new one is underneath them. I do not understand at all and I can not guess why at all!
http://www.mkpdesigns.net/atlanticglass/
Many thanks if you can take a second to look!
I’m sorry for my delayed response. Have been a little preoccupied with work. It appears you resolved the issue you were having. I’m glad you fixed it.
This was excellent and precisely what I needed in a pinch for a clients demo site. Thanks so much! I”ve got you bookmarked.
Thank you.
I did this before I came across your post, based on how the responsive style sheets center the menus on tablet/phones sizes:
/* center top two main menus */
.menu.menu-primary.superfish.sf-js-enabled,
.menu.menu-secondary.superfish.sf-js-enabled {
float: none;
text-align: center;
}
#nav .menu.menu-primary li.menu-item,
#nav .menu.menu-primary li.menu-item.current-menu-item,
#subnav .menu.menu-secondary li.menu-item,
#subnav .menu.menu-secondary li.menu-item.current-menu-item {
display: inline-block;
float: none;
}
Not tested yet in every browser, but works well when resize desktop windows down to small sizes.
Hi. The solution worked for me, but only for the first level of menu ites. The drop-dowm ,menu became horizontal (which could be still usable) but the third level is on top of the second.
The site is http://www.ztss.sk/ (3rd level menu is in the KTO SME – DOKUMENTY menu point.
Has anyone a solution for this problem?
That’s unusual. Which Genesis child theme are you using?
Magazine Child theme
I’ll have a play with it in a test domain.
Superb! well done
You’re marvellous! I managed to solve my cousin’s website right away!
Thank you!
And it’s for my model cousin’s blog at suan-li.com she’s the Oriental lady croupier in the Skyfall Bond – casino scene.
Nice! I like the website. Your cousin is a beautiful woman; I’m sure beauty runs in your genes.
So I tried this before, and thought I got it working on a child theme, but can not find the site I did it on. Now I am working on a responsive site using the Decor theme, and can not get this working.
http://www.mkpdesigns.net/carmonscurlupanddye/
Anybody have any ideas why? Thanks!
Thank you so much for this solution. It is working for top level menu items, but the drop down items are coming up to the right of the top item instead of underneath. I am working with the associate theme. Site is http://www.swanhomeandauto.com Not sure what I did.?
You seem to have removed the centering so I can’t see the effect to help you with it. If I were helping I’d look at the CSS for the menu and check whether the sub menu li/ul selectors have display:absolute set.
Apologies. My client was looking at the site and I didn’t want the menu acting wonky. I put it back if you can spare another moment.
I know why it doesn’t work. Your menu drops onto 2 lines. It is actually centered except for that.
The fix:
1) Make sure the CSS shown in the above guide is put at the bottom of your site’s CSS file (style.css)
2) Add this to the bottom of the site’s CSS:
#nav .menu a {font-size: 14px;padding:5px;margin:5px;}Play with the font-size, padding and margin to get the menu looking as you need it too.
I am sorry for replying late. I’ve been busy with clients.
Have fun, Lauryn, and please come back if you need more help.
Excellent stuff, thanks. I’m new to Genesis and this is going to save me a lot of tinkering time, and make my sites look that little bit better. Appreciate the help. I added a background-color in the #nav div to make it appear to stretch the width of the page.
Good tip. You will need to use media queries to make the menu stack (or not) when viewed in small screen devices. Will update the guide to show how this is done.
I’ve been hassling with centering the menu for months for a client with no results till NOW. Works great. Best of all, clear instructions. Thank you!
You’re welcome.
Hi Lee,
This was very helpful, thanks! At first I was bummed, because even though the top row looked great, my dropdowns were all messed up. As I looked into it, this actually made sense, because the default styling of the dropdowns is drastically different from the top row.
So after some digging, I just found some code that would restore what the dropdown CSS was expecting for stuff below the top row:
#nav ul li ul li {
display: inline;
white-space: normal;
}
Hooray! Then I noticed that this did not look good at iPad portrait size and below, so I just used this line to cancel the top row “table” stuff at max-width of 1024, very similar to the strategy above:
#nav ul li {
display: inline;
white-space: normal;
}
My CSS, including the responsive stuff, is based on the Genesis Sample Child theme, which I have modified for my own tastes and preferences. Hope this helps someone.
Thanks! Dave
Thanks Dave. I’m sure it will. I keep meaning to update the post to add media queries but there are just not enough hours in the day. I will get around to it.
Thank you so much, I’m so glad I found this! I’ve been working on trying to center my menu for days and I could not figure it out.
You’re welcome. When I first tried to center the menu it took me several goes using different methods to get it right. I’m glad you’ve found this useful :)
Hi, Lee–
I tried adding the code but it isn’t working. I’m assuming that there shouldn’t be any problems with the new releases of WP or Genesis?
My site is: amadorvalleyhs.org
I’ve cleared my cache and am using multiple browsers. Just kinda stuck. I appreciate any advice you can give.
Thank you,
Erik
I noticed that in the Education Theme I am using for Genesis that #menu-secondary is used instead of #subnav. I replaced everything respectively but it still isn’t working….
Hi Erik, I’m sorry for this delayed response. It seams the method doesn’t work for a few themes. I will be out of town for the next 2 days. Will take a look on Monday (today being Saturday).