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
Add this CSS snippet to the Genesis theme settings below where it says Enter scripts or code you would like output to wp_header():
<style type="text/css">
#nav .wrap {
margin-left: auto;
margin-right: auto;
display:table;
white-space:nowrap;
}
#nav{text-align:center}
.sub-menu {text-align:left;}
#nav ul{
list-style:none;
display:table-row;
white-space:nowrap;
}
#nav li{
display:table-cell;
}
#nav ul a{
display:block;
}
</style>
<!--[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 plugin 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.
Want to republish this content? Read the copyright notice first.. If you like it, support it.
