[Support request] Centering Navigation with same formatting when Sticky

[jregist]

I’ve used this article – https://docs.generatepress.com/article/centering-logo-navigation/ – to try to get my logo to be centered with split navigation. However, I can’t seem to get it to just keep this same format when I scroll down the page. I used the

Check this page — https://gfa.wishfulthinking.us/residential/ — to see what I mean. Seems like it should be easy to just turn off the change to a different sticky formatting. But I’m probably missing something.

Thanks,

Joel

[jregist]

Oops. The password is chicagoarchitect

Thanks!

[Leo]

Hi there,

It doesn’t look like you’ve followed the instruction completely.

For example, I’m not seeing the menu-item-separator added as instructed in step 5 here:
https://docs.generatepress.com/article/centering-logo-navigation/

Can you make sure to use the exact steps detailed in the article and that the CSS match as well?

Thanks!

[jregist]

Actually I don’t see that CSS Class (optional) option in the UI. So I just used the auto-assigned menu selector “#menu-item-823” in my CSS.

[Elvin]

Hi,

You can enable the CSS class option on the Main menu UI through the “Screen Options” button on the upper right-hand side of the Appearance > Menu page. It’s on the left side of “Help” button.

Here’s a demo on how to enable it – https://share.getcloudapp.com/6quPZLYw

[jregist]

Ok — I have made that change to get everything the way it was in the article. Still when I scroll down on this page – https://gfa.wishfulthinking.us/residential/ – I get the header moving over to left above the nav.

Joel

[jregist]

Nevermind. I think I figured it out. Added this code and the logo stays in the center

@media (min-width: 769px) {
#sticky-navigation .main-nav,
#sticky-navigation .main-nav .menu-item-separator {
flex: 1;
}

#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}

[jregist]

Do you have any ideas to keep the original size and top and bottom spacing of the nav and logo when I scroll?

[Leo]

Can you try activating this option and see if it works better?
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know 🙂

[jregist]

The menu loses its formatting when I activate nav-as-header. However, when I scroll down the Sticky formatting looks perfect.

[Leo]

Try adding this CSS as well:

.main-navigation .main-nav {
    flex-grow: 1;
}

[jregist]

That’s looking much better. I still have some jerky reformatting that’s going on but should be able to figure that out.

[Leo]

Can you try removing the sticky navigation logo?
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logo

[jregist]

Removing the sticky logo completely? Done.

[Leo]

Hmm it’s super strange that the logo disappears.

The logo should remain in the static navigation when the navigation as a header option is used as seen here:
https://www.screencast.com/t/KFJUNzru

I tried for awhile but unable to replicate the issue on my end.

Is there a chance you can disable all plugins except GP Premium, remove your custom CSS except the centering logo CSS and make sure there is nothing conflicting?

Let me know 🙂

[Author]

Posts