Centering Navigation with same formatting when Sticky

Oops. The password is chicagoarchitect

Thanks!

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!

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.

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

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

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

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

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

Let me know :)

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

Try adding this CSS as well:

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

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

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

Removing the sticky logo completely? Done.

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