[Support request] transparent navigation background

[Heinrich]

hi team, struggling with a color setup. i want to have the normal navigation transparent but the sticky navigation with a background. when i change the background colour in customizer, it effects both.

in the screenshot you can see the yellow part i want to have transparent without effecting the background when scrolling.

[David]

Hi there,

you can use a Header Element:

https://docs.generatepress.com/article/header-element-overview/

You don’t need to add any Page Hero content. Just skip to the Site Header tab and select Merge with Content. You can then edit the Navigation colors and set them to transparent.

The sticky nav will respect the customizer colors.

[Sam]

Hi!
I wanted to achieve the same. A transparent background but white while on “sticky”.
The sticky effect set to Hide when scrolling down.
I didn’t work out for me. Don’t know if I missed something here.
In:
Layout / Typography / Primary Navigation the background set to white.
And I created a Header Element, changing only:
Merge with content and the display rules to Entire Site.

What happened: the navigation is always white, the header element didn’t make a difference.

[David]

1. Keep your current Customizer colors for the Navigation.
2. Edit the Header Element. Make sure Site Header > Merge with content is enabled.
3. You will see an option for Navigation Colors. Check this.
4. You can now edit the Colors for the navigation – by default they will be set to transparent.

[Sam]

Almost there…

[Sam]

All right.
Actually I was struggling with it for really no reason.

Why: actually the site already has elements configured. Some of those elements already define headers.
Therefore, what I had to do was to apply “navigation colors” to the already existing elements.

Simple for those who are more into programming… Not really my case!
I’m from languages and marketing 🙂

[David]

Well i am glad to hear you found the solution 🙂

[Author]

Posts