Move Secondary Navigation Inside Sticky Navigation

Hi there,

Have you solved this?

The menu items are exactly the same in static and sticky mode.

Let me know :)

Hey Leo. No, I've set it back to normal so it doesn't bother me while I'm trying to figure it out (:

Also, I decided I don't want to use up the secondary navigation just for the phone number because I think I may need it for another purpose. I'm hoping to be able to centre all the navigation items except for the last one—the phone number—which should align right.

What if you set the navigation to be center and use this method for the float right items?
https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

I would try that but it doesn't appear to be an option. In the Customizer, Navigation Alignment gives you Left, Center or Right. Selecting any of those has no effect that I can see. The Navigation Position option is set to Float Right, which is the only option to position the navigation to the right of the logo.

I don't see any overriding CSS that is not allowing the navigation to sit centred.

Hi there,

you can try this:

.main-navigation ul {
    display: flex;
}
.main-navigation li:first-child, .main-navigation li.nav-phone {
    margin-left: auto;
}

Only thing is you may notice movement in the nav when it goes to sticky. Issue is because where jumping from one nav layout to another. Let me know.

That's almost got it David but it only works when the the nav goes sticky. Trying to figure out what changes because your css is still applied.

You would need to use the Nav as the header as it won't work with a floated navigation in the header:

https://docs.generatepress.com/article/navigation-as-a-header/

Hot dog! I didn't know that was a feature. That's done it. All I have to do now is adjust a bit of CSS and I'm set. Thanks David (:

Awesome. Glad we could be of help.