HowTo: Center WordPress Genesis Theme Horizontal Menus

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 and you’re in for a lot of fun.

That is, at least, until now.

I spent months working out how to center Genesis menus. Different devices like mobile phones, desktops and tablets and different operating systems like Linux, Windows and MacOS have their own way of rendering padding, margin and font sizes. These layout differences made menu centering a hard pain monster to master.

I tried using Javascripts and PHP scripts to detect browsers, operating systems and devices so that different menu centering CSS could be served to different visitors. 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.

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

How to Center Genesis Menus

All the CSS shown below can be added to either your child theme’s CSS file (style.css) or to form field in the Genesis theme settings where it says Enter scripts or code you would like output to wp_head(). There is no need to delete anything from your existing style sheet unless told to do so below here (thanks for prompting me to add this line Melanie :).

When adding the below snippets to style.css, please remember to remove the <style> </style> tags.

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 can usually center the nav menu by adding this to your theme’s CSS:

If the above doesn’t work, remove it and use the following instead:

If you use a responsive design you will need to correct the menu display at your breakpoint with:

If you are concerned about compatibility with IE 7 and under, add this IE compatibility CSS into the wp_head() section under Genesis > Theme Settings > Header and Footer Scripts (this will not work in style.css):

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!

A couple of notes

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.

Some themes use non standard IDs for the navbar divs. For such themes, #nav and #subnav will not work as CSS ID selectors. You will need to find the correct ID to use in theses cases. I will help where I can.

Thanks goes to pmob.co.uk for reminding me that CSS can be used to force web browsers to treat divs as table cells.

Update

Some Genesis menus are more awkward than others. Here is another code snippet you might try. This snippet centers the primary nav. Change #nav to #subnav to center the secondary navbar:

Update 2

I really do need to rewrite this page… If none of the above code samples work for you, try this one:

Win the battle. Social Warfare Dynamik Website Builder Author Pro

Leave a Reply

106 Comments on "HowTo: Center WordPress Genesis Theme Horizontal Menus"

Notify of
Sort by:   newest | oldest | most voted
wpDiscuz

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!