Logo in the nav center

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!

Disabled

Looks like the center logo CSS is the issue.

Can you add it back in again?

Thanks :)

Done

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

If so can you turn them off for now?

Let me know :)

Nope

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;
        }
}

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

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

I mean the issue is with stick nav, not primary

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

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

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

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