[Resolved] Sticky Header full with & merging possibility

[David]

Hey there,
I have another question that came up:
I would like to have a transformation to a sticky header in fullwidth (when I use sticky it will contained automatically and I do not find a way to adapt that in the customizer)

AND I would like to use a merged header (transparent header) on one page.

I do not understand the concept of “navigation as header” at the moment – it looks like this is necessary for the merging to work but at the same time it destroys my header formatting (menu height, logo size, etc.).

What is a good way to accomplish both?

[David]

Hi there,

go to Customizer > Layout > Primary Navigation.
Temporarily change the Location to Below Header… you will then see the Width options for the Navigation, set this to Full Width.
Then change the Location back to Float right.

The Sticky Nav should now be full width.

[David]

Hello David,

it is not working on my end… Don’t know what I don’t see there. All width are set to full but sticky remains contained…

Your support is incredible, I appreciate that a lot. Thanks.

[Ying]

Hi David,

This topic has been marked as resolved so your site info has been erased.

Could you please provide your site info again?

Thanks!

[David]

Sure, here it is.

Although it looks different now – I guess there was a caching issue or something like that too. So now it is fullwidth – but without the padding of the original navigation.

Is there any support doc that explains the logic behind it? I don’t get how the parameters of normal header – navigation – header as navigation – the options that come up with different header styles and sticky header options relate with each other.

[Ying]

You can add this CSS to give sticky navigation the same padding as primary navigation:

#sticky-navigation {
    padding: 30px 40px 0px 40px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Here’s our documentation page, search header, or sticky navigation to check out the info.
https://docs.generatepress.com/

Let me know 🙂

[David]

Amazing, thanks.
Out of interest: Why is that not set automatically? Like: What is the logic regarding padding in sticky mode?

[Elvin]

Sticky navigation tends to block a certain portion of the content. Some users don’t like it taking too much space so padding is not applied for it to be as compact as possible. 🙂

[David]

Thanks for clarifying. Best, David

[Elvin]

No problem. 🙂

[Author]

Posts