[Resolved] Logo in the nav center

[Dmitry]

Hi!

Can you help a little?

I use this method https://docs.generatepress.com/article/centering-logo-navigation/

If I do so, primary nav dont disappear for the mobile version. And extra margin appears in sticky nav.

[Leo]

Hi there,

That’s weird. Looks like the toggle isn’t kicking in?

I don’t think that’s because of the CSS for centering the logo.

Can you temporarily disable that CSS so I can check?

Thanks!

[Dmitry]

Disabled

[Leo]

Looks like the center logo CSS is the issue.

Can you add it back in again?

Thanks 🙂

[Dmitry]

Done

[Leo]

Are you using any caching plugins or server cache at all?

If so can you turn them off for now?

Let me know 🙂

[Dmitry]

Nope

[Leo]

Ok try modifying your CSS to this:

@media (min-width: 769px) {
.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}
#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}
#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}
}
@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
        }
}

[Dmitry]

That works! But there is still some issue in sticky nav:
1. large padding in the separator place.
2. It disappears after reducing window width

[Leo]

1. Not seeing this issue:
https://www.screencast.com/t/fMToRylAD

Am I missing something here?

2. So you want the logo in the middle and toggle on the right?

Let me know 🙂

[Dmitry]

I mean the issue is with stick nav, not primary

[Tom]

1. Try adding this CSS:

.navigation-stick .menu-item-separator {
    display: none !important;
}

2. What disappears exactly? I’m not seeing anything disappear as I reduce the window width.

Let me know 🙂

[Dmitry]

Great! And the last: how can I manage the gap between menu items? When primary nav becomes more narrow the gaps become not the same.

You can check It on a main page and on a screenshot: https://www.screencast.com/t/P8m1vH8C

[Tom]

The logo is centered regardless of where the menu items are (so it’s true centered). If you want the space to match, you’ll need to reduce the space between menu items a bit so it gives it more space on either side of the logo.

Let me know if you need more info 🙂

[Dmitry]

Super! Let me know – the issue happened because of my CSS or it was originally in GP docs?

P.S. Im saving all useful specific css blocks for quick use in future projects with GP

[Author]

Posts