The url is http://dev7.rockahulahawaii.com. It has fixed header. I’ve added the following CSS to create a transparent header.
.fl-page-header-wrap {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
position: relative;
z-index: 999;
}
When I scroll down, I want to remove that dark transparent background so that the background image is not darkened by the transparent background. I’m guessing there must be a way to style the header when it’s scrolled without affecting the header when the page isn’t scrolled.
How do I style the header to remove the transparent overlay that is layered over the header background image when the page is scrolled down?
I apologise, but I am slightly confused. You say that when you scroll the header is transparent and you want to remove the transparent overlay upon scroll.
However, when I scroll on your site, the header isn’t transparent at all. It has a solid background image. Therefore, do you mean you want to remove the transparent overlay when not scrolling?
Thanks for your quick reply! I want to remove the transparent overlay and show the solid background when scrolling. Currently it shows both the solid background and the transparent overlay when scrolling.
If you resize the browser, you’ll see that the transparent overlay disappears and the background image is more vibrant. I did that with CSS. That is how I’d like the header background to appear when scrolling.
Can you target .fl-page-header-primary .fl-page-header-wrap instead of .fl-page-header-wrap on your styling above and see if that’s what you’re looking for?
