Fixed menu transparent bg on slider, opaque below header

[HGPower]

Hello. I’d like to have my menu have a transparent background with white text on top of (i.e. overlaid at the top of) the slider and when you scroll down, have an opaque (white) background below the header.

I’m using a fixed header with a transparent navbar (renew). I used the following css (from another post) and the top part is working okay:
@media (min-width: 768px) {
.home .masthead {
position: absolute;
top: 0;
right: 0;
left: 0;
}

The problem now is when I scroll below the header, the navbar remains transparent. How do I get it to switch to opaque and resize the logo?

[lely]

Hi There,

Please check this thread:

Header Menu Image

Feel free to adjust the JS code to work on your case.

For the logo resize, you add the code suggested here: https://theme.co/apex/forums/topic/logo-resize-on-scroll-down/

Hope this helps.