Center 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:

<style type="text/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;
}

</style>

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

<style type="text/css">

/* Center Primary Nav Bar  */

#nav .wrap {
    margin-left: auto;
    margin-right: auto;
    display:table;
}

#nav,
.nav-primary {
    text-align:center;
}

#nav ul,
.nav-primary ul {
    display:table-row;
}

#nav li,
.nav-primary li {
    float:none;
    display:table-cell;
}

#nav li li,
.nav-primary li li {
    text-align:left;
    float:none;
    display:table-cell;
}

</style>

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

<style type="text/css">

@media only screen and (max-width: 839px) {

    #nav .wrap,
    .nav-primary .wrap
    {
        display:inline-block;
    }

    #nav ul,
    .nav-primary ul {
        display:inherit;
    }

    #nav li,
        .nav-primary ul {
    display:inherit;
    }

}

</style>

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):

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

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:

<style type="text/css">

/* Center Primary Nav Bar  */

#nav {
  text-align:center;
}

#nav .wrap {
  padding:0;
}

#nav .wrap ul {
  display:table;
  float:none;
  text-align:center;
}

#nav ul {
  display:table-row;
  padding:0;
  width:55%!important; /* Adjust according to need */
  margin-left: auto;
  margin-right: auto;
}

#nav ul li li {
  text-align:left!important;
  float:none!important;
}

</style>

Update 2

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

<style type="text/css">

/* Center Primary Nav Bar  */

.menu-primary {
    float: none;
    text-align: center;
}

.menu.menu-primary > li  {
    float:none;
    display:inline-block;
}

/* Center Secondary Nav Bar  */

.menu-secondary {
    float: none;
    text-align: center;
}

.menu.menu-secondary > li  {
    float:none;
    display:inline-block;
}

</style>