Topic: Sticky nav has different layout than primary nav

Patrick
November 25, 2025 at 7:55 am

Hi Support,

I use standard primary nav and stick nav.

For the primary nav I have set the Navigation Location to “Float left”, however the sticky nav does not inherit this setting, and also the max width is different (check screenshots). I haven’t applied any custom CSS, using GP + GB latest versions.

How can I ensure the sticky nav matches the primary nav?

Thanks
Ying
November 25, 2025 at 10:55 am

Hi there,

It’s expected that the sticky nav is different from the primary nav.

Do you want them to be the same? If so, can you tick the use navigation as header option at customizer > layout > site header?

If it doesn’t work, can you link me to your site?

Let me know 🙂
Patrick
November 25, 2025 at 11:23 am

Hi Ying,

Thanks for your fast reply.

If I select the “Use header as Navigation” option, the Primary Nav layout is “destroyed” (no height setting, float option not available). However, the Sticky Nav now has the same layout as the primary nav.

But I need the Primary Nav to be float left with a certain height?

I added login details in the private section.

Thanks
Patrick
Ying
November 25, 2025 at 12:43 pm
But I need the Primary Nav to be float left with a certain height?

If you don’t need transitions for the sticky nav, you can try disabling the GP sticky nav and using this CSS instead:
```
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}
```
Let me know if this solution works for you.
Patrick
November 25, 2025 at 1:35 pm

Thanks for the CSS, that could work in this case. But what if I need the transition and the hide on scroll ? How do I make sure Primary Nav & Sticky have the same layout?

Thanks
Ying
November 25, 2025 at 2:55 pm

You will need to use the use navigation as header option, then use CSS to shift the menu to the left.

Do you want to go that route? Let me know 🙂
Patrick
November 26, 2025 at 7:48 am

Thanks,

Okay, if we have to use custom CSS, it would be perhaps helpful for all the people reading this to provide your optimal solution?

I thought it could be possible within the standard settings. Perhaps sth for the roadmap?

Thanks

Ying

November 26, 2025 at 11:50 am

Try this CSS:

.inside-navigation.grid-container {
    flex-direction: row-reverse;
    justify-content: space-between;
}

body .inside-navigation .navigation-branding {
    margin-right: 0;
}

And you can control the navigation height by menu item height at customizer > layout > primary navigation.

Patrick
November 27, 2025 at 7:46 am

Thank you, Ying!

That works for now.
Ying
November 27, 2025 at 11:21 am

You are welcome 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Sticky nav has different layout than primary nav