Centering Your Logo In the Navigation

Adding your logo into the navigation and centering isn’t very hard – it just requires a few steps to achieve.

Change your navigation location

First, change your navigation location to Below Header in Customize > Layout > Primary Navigation.

Center your navigation

Then, center your navigation in the same area using the Navigation alignment option.

Hide your current header

Since we’ll be adding your logo to the navigation, we don’t need our regular header. Go to Customize > Site Identity and remove your logo/hide your site title and tagline.

Then add this CSS:

.site-header {
    display: none;
}

Add your logo to the navigation

Now go to Appearance > Menus and add a new Custom Link.

As the URL, add in your home page URL (or whatever you like).

As the Link Text or Navigation Label, add in your logo image HTML:

<img src="URL TO YOUR LOGO" alt="Your site name" title="Your site name" />

Then, in the CSS Classes field (you may need to enable it by clicking Screen Options at the top right), add in these classes:

hide-on-mobile hide-on-tablet centered-navigation-logo

Now that we have it added and saved, we need to add a little more CSS:

.main-navigation li {
    vertical-align: middle;
}

.main-navigation .main-nav ul li.centered-navigation-logo a {
    padding: 0;
    line-height: 0;
}

.slideout-navigation .centered-navigation-logo {
    display: none;
}

And we’re done! Of course, depending on your logo design you may need to tweak it with some more CSS, but this should get you well on your way to centering your logo in your primary navigation.

Making it look good on mobile

Obviously, having a logo in the middle of your mobile navigation isn’t what we want, but the code we added above should already remove it on mobile.

So, to add our logo to our mobile navigation, I suggest using the Mobile Header feature.