[Support request] Transparent sticky header to become solid color when scrolling down

[Anonymous]

Hello,

(i just bought the GP theme and am excited about it :))

there was another thread about the problem stated in the subject but I couldn’t reproduce the solution:

I have a transparent header (via “merge header”) on the page.

When I scroll down I want the (sticky) header to get a solid color (white for instance), so you can read the navigation.

I tried playing around with “sticky navigation” in the customization, but this did not change any behaviour – the sticky header remained transparent.

How can I solve this?

Thanks!

[Leo]

Hi there,

Can you try this CSS?

.main-navigation.navigation-stick {
    background-color: #ffffff;
}

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

If this doesn’t work are you able to provide a link to your site? Thanks!

[Anonymous]

Yes that worked, thanks! (btw I had to move away from “merge header”, that messed everything up, I just set the color of the header to transparent.

Now one more problem: the logo in the header “disappears” – this should also remain sticky like the navigation – how would I go about that?

[Leo]

Try the navigation logo feature: https://docs.generatepress.com/article/navigation-logo/

[Anonymous]

Ok nearly there :)) – now the logo is also in the sticky, and in the sticky it is where it should be (to the left of the screen), but in primary navigation the logo is not to the left of the screen but right next to the left edge of the text of the navigation.

So when the menu switches from “primary” to “sticky” the logo jumps round from left to right.

How can I make the logo appear in the same position as it does in the sticky menu?

[Leo]

Try changing the inner navigation width to contained: https://docs.generatepress.com/article/navigation-layout/#inner-navigation-width

[Anonymous]

It’s already on contained.

I inspected the html during scrolling, and here’s where a difference popped up in the element with “id”:
sticky-placeholder

style attribute of id above with sticky:
visibility: hidden; float: right; display: block; width: auto !important;width:auto !important

style attribute of id above with primary nav header:
visibility: hidden; float: right; display: none; width: auto !important;

the difference is display: block vs disply: none ->
so I would have to get the normal header (non sticky) to also do display: block I guess?

How can I achieve that?

[Leo]

Can you link me to the page?

[Anonymous]

Can I pm you the link?

[Leo]

Yup you can send it through Account Issue: https://generatepress.com/contact/

Just mention the topic.

Thanks!

[Anonymous]

ok thanks!

[Author]

Posts