[Resolved] Center inline logo without moving menu items to edges

[jhmattern]

Hello. I’m trying to finish a theme move from Divi to GeneratePress, and I have it just about where I want it other than the header and primary menu.

I already followed the instructions at the link below to get the center inline logo set up.

https://docs.generatepress.com/article/centering-logo-navigation/

The problem is this pushed both sides of the menu to the outer edges of the site. I need them each moved more toward the center – radiating out from the logo instead of having big gaps in the menu.

Is there a way I can adjust the CSS from that help page to accomplish this?

Thanks!

[Leo]

Hi there,

What if we add this CSS as well?

.inside-navigation.grid-container {
    max-width: 800px;
}

Let me know 🙂

[jhmattern]

650px did beautifully in this case. Thanks so much!

[Leo]

No problem 🙂

[jhmattern]

I have a quick follow-up on this. When I center the logo but also set sticky navigation, the logo disappears but the full width stays open, leaving a big space in the middle of a menu.

Is there a way to either have the logo stay there but shrink with the menu, or have the logo remove and have the two sides of the menu come back together in the middle when the sticky menu displays?

[David]

Hi there,

for the logo to shrink during transition needs the Navigation as Header option to be enabled and this method applied:

https://docs.generatepress.com/article/centering-logo-navigation/#using-the-navigation-as-a-header

If you want to set that up i can assist with some CSS to increase the static logo size etc…

[jhmattern]

Thanks. I’ll try that on one of the sites. For the main one I’m working on right now, I think it would be better just to skip the logo in the sticky menu. Is there a way to remove that large space left from .menu-item-separator when it’s in the sticky nav?

[David]

So this CSS – which will also remove the menu separator from the mobile:

.main-navigation.is_stuck ul {
    justify-content: center;
}

.main-navigation.is_stuck .menu-item-separator, 
#mobile-header .menu-item-separator {
    display: none !important;
}

And also fix the logo when mobile menu is open – edit this CSS and add the top property i have commented below

.site-branding,
.site-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
    top: 0; /* Add this property */
}

[jhmattern]

Hi. You gave me a fix previously to close the gap left when the center logo disappears on scrolling. It was working great on several of my sites, but since a recent update it appears to be broken again. Do you know what I can do to fix this again and make sure it’s preserved on updates? You can see an example at https://ajkleinbooks.com — when you scroll, the logo disappears, but there’s a huge gap left in the menu again.

Thanks!

[David]

Hi there,

that site seems to be missing this CSS:

.main-navigation.is_stuck .menu-item-separator, 
#mobile-header .menu-item-separator {
    display: none !important;
}

[jhmattern]

That is super weird. I know we had that working on several of my sites previously, and all custom CSS is in the same place. Not sure what happened to change that. Thanks for figuring that out though. Seems to be working on that site, and I’ll go implement it on the others that were affected too. Much appreciated!

[David]

Glad to be of help 🙂

[Author]

Posts