There’s been several very good articles written that show how to position a logo in the center of the main navigation menu, such as this one by Sridhar Katakam.
These various methods work great, but I wanted to show you another option that I use that uses CSS only. Some advantages to doing this using only CSS:
- No need to use additional PHP code
- No need to enqueue additional scripts
- No need to create a custom menu or use two menus (one for left and one for right)
- No need to use any plugins
- Uses basic CSS practices so works with all modern browsers
- Easy Responsive styling
We’re using the Primary Navigation, and this method works best with an even number of menu items. Also, we’re not using the header widget, so let’s start by removing that. Some themes may not have it.
Remove The Genesis Header Right Widget Area
To check if your theme supports a header widget, in your WordPress admin panel go to “Appearance > Widgets” and look for your header widget area. In most Genesis themes this is called “Header Right”.
If it’s not there, you can skip this step. If it is there, let’s remove it by adding this to your theme’s functions.php file:
[gist id=”8286e2953876313b547b” file=”remove-header-widget-area.php”]
Add CSS Class To Menu Item
Next, we’ll add a css class to the first menu item to the right of the logo. To do that, visit your WordPress admin panel and go to “Appearance > Menus”. Expand the first menu item to the right of the Logo and add a class of “split-right” inside the field that says “CSS Classes (optional)“.
If you don’t see this field, click on the link on the upper right part of your screen that says “Screen Options”, and check the “CSS Classes” checkbox.
Center Logo On Genesis Navigation Menu Using CSS
Our demo is using the Genesis Sample theme. We’ve used the following CSS. Add this CSS (or make changes to your existing CSS) to your theme’s style.css file:
[gist id=”8286e2953876313b547b” file=”logo-centered-navigation-menu.css”]
Final Centered Logo Navigation Menu Adjustments
With the code added, we have a few adjustments to make to get our Logo and Navigation Menu centered correctly.
Change Your Logo Path and Dimensions
We’ve uploaded our logo image to our theme’s “images” folder. Change the “.site-title a, .site-title a:hover” image to the correct path for your image, as well as “h1.site-title, .site-title a, .site-title a:hover” to match the size you’d like for your logo.
You’ll also have to adjust “.nav-primary .split-right” left-margin to match the width of your logo.
Manually Adjust CSS To Balance Out The Navigation Menu
Because each menu item is a different width, the intersection between the menu item to the left and right of the Logo are not perfectly centered on your screen. You could adjust for this by making all of your menu names the same length, but that’s not practical for most uses.
To fix this, we’ve added a left margin to the first menu item, using “ul.genesis-nav-menu > li:first-child”. You’ll have to adjust this number until you’re satisfied with the positioning (also in the media query). It’s a manual process, but doesn’t take long to get the right number.
View Center Logo On Genesis Navigation Menu Demo
If you like this tutorial and would like to receive tutorials and more free tips by email, enter your name and email below:
I really needed this. I tried some of the other ways you mentioned at the beginning, but I prefer this method the best. Thanks.
Thank you, ceah! Glad it helps!!!
Nice elegant solution to a problem I’ve tried to solve for the past couple of days. Thank you very much.
Hi David, thank you for your nice comment. I’m happy I could help!
i don’t have the “css class (optional)” in my genesis child theme (parallax), can you give an alternative to that?
Hi Andrea, the “CSS Class” is actually a function of WordPress, not the theme, and should show with any theme, unless for some reason that theme disables that function (which I’ve never seen done).
On the menu admin screen, there’s a tab at the very top right of the screen that says “Screen Options” (next to another tab that says “Help”). Click on that and there’s a check box for “CSS Classes”. Check that box and it will appear on the menu.
If it’s not there for some reason, it could be a conflict with a plugin, etc. Each menu item has a unique ID (which you can see by looking at the code) and you could use that, but it’s more code and using CSS Classes is a better way to do it.
You could also use the CSS property :nth-child to target the ones you want, but also more code and work: https://css-tricks.com/how-nth-child-works/
Hope that helps!
Thnx so much for your quick response, and the css classes checkbox did the trick!
Awesome, glad you got it sorted!
Thank you for this awesome tutorial! I have to modify the css a bit, but it’s finally working like a charm! I like this much better than the method of using two nav bars, an image as a menu item, or a custom plugin. It’s easy to make mobile responsive as well.
Just a note in case it helps someone else save an hour of frustration: If you use this code on a genesis theme that has a custom header option enabled, you’ll need to remove that code segment from functions php and then go in and change the genesis>theme settings>header to use an “Image Logo” instead of dynamic text. (You may wish to add this info to your tutorial as well since I believe you’ll have to disable custom header support to get the logo to show up.) I had forgotten all about this option, and couldn’t puzzle why I had a space for the image, but no image! 🙂
Hi @stephaniesustainingthepowers:disqus, thanks for your comment! I’ll have to take a look at that. It may be that you can get around it by removing the usual -9999px indent, but I’ll try out a couple things and update the article to reflect that. Hope it didn’t cause you too much trouble, but glad you got it working!
I first tried leaving the custom header and changing the indent, but it wouldn’t show up for me for some reason. I don’t know if that’s part of the Genesis code for a custom header or if I just didn’t find the right lines of css in the theme I was working on (EnterprisePro), so I could totally be wrong in my assumption that it’s necessary. 🙂 This theme has a few weird things in the code. I didn’t want the custom header in the media library anyways, so it made more sense and took less time to just pull it out and change that setting (once I remembered it.)
There’s always a dozen different ways to code something though, so I’m sure it’s just one option, and it may vary from theme to theme as well depending on css. I’d be happy to share the css I modified if that would be useful to you. 🙂
I’ve got it all up and running and responsive on the site now if you’re curious to see it in action: http://www.powersfulstudios.com
Hey @stephaniesustainingthepowers:disqus…it looks great! I think this is a great example of this method, because you have 2 items on the left and several on the right, so you can tweak it to balance it out. Nice job!
You’re right, there are too many ways to code things hehe. It’s good, but can be frustrating.
If you don’t mind posting your CSS, it might be helpful to someone reading this in the future. Thanks again for the update!
Hi Tony, thanks for the tutorial.
I’m not sure if this is an issue with Dynamik or i’ve missed something. I’ve followed the tutorial and everything is working bar the logo. I just have an empty space where the logo should be. I’ve changed the path to the image url but nothing’s showing.
Any idea?
Hi @paulus70:disqus . I haven’t used Dynamik so I can’t help much there.
If you have a link you can share I’d be happy to take a look. Could be a conflict with an existing style using !important to override these changes, but hard to say without looking at the site.
Thank you SO MUCH for this! You saved me hours.
Hi @lilyliseno:disqus , thanks for your nice comment! I’m happy that this was helpful! Take care 🙂