Archived topic
Sticky header becomes transparent on scrolling
7 replies · Started by Oisin on August 6, 2020
Hi,
I'm using a merged header element with a background of rgba(0,0,0,0.5).
However when I scroll down the header becomes transparent.
How can I alter the colour of the header when I being scrolling. Ideally it would be rgba(0,0,0,0.5) as well but if it just is set as a solid colour that's also fine.
Thank you.
Hi there,
What is your setting for Customizer > Colors > Primary Navigation > Background?
Let me know :)
Hi Leo,
It's set to invisible, however adding any colour there just also adds a coloured background to each menu item when the header is scrolled up to the very top of the page.
You can see it on the webpage currently.
Thanks Leo.
Try using the Navigation Colors options in the header element when the merged option is used: https://docs.generatepress.com/article/header-element-overview/#navigation-colors
Then the sticky navigation color would inherit the setting in the customizer.
Let me know if this helps :)
Still doesn't seem to work for some reason.
Hi there,
the way it should work is as follows:
1. In Customizer > Colors > Primary Naviagation - set the Colors here that you want to use for the Static and Sticky Navigtion.
2. In the Header Element you change the Navigation colors to transparent.
They will only apply to the static nav.
Ah ok this seems to work.
So you click the navigation colours checkbox in the header element, but don't actually enter anything into the boxes at all. Keep them completely blank.
Thank you.
Yes, you can leave them blank as they have a default transparent setting.
Glad to be of help
