Change transparent header to solid background on scroll

I'd like my header to go from transparent to white on scrolling, like this example: https://www.norlha.com. Is this possible?

What is your site url? We can check easier

Hi, it's www.porfiriogutierrez.com.

I have it set to a nav bar with white background for now, but would like a transparent one with white text that converts on scroll to a solid white background with black text, as in the norlha.com example. 

On 7/8/2023 at 6:37 AM, mphdesign said:

Hi, it's www.porfiriogutierrez.com.

I have it set to a nav bar with white background for now, but would like a transparent one with white text that converts on scroll to a solid white background with black text, as in the norlha.com example. 

Add this code to Design > Custom CSS

body.homepage article section:first-child {
    padding-top: 0 !important;
}
body.homepage header#header:not(.shrink) .header-background-solid {
    background-color: transparent !important;
    opacity: 0 !important;
}
body.homepage header#header:not(.shrink) a {
    color: white !important;
}
body.homepage article section:first-child .content-wrapper {
    padding-top: 0 !important;
}

Thank you, this is amazing!!!

I'm noticing the transparent overlay doesn't work on mobile and the logo doesn't show. The main menu also doesn't show up when you click on the hamburger. Do you have a solution for this?

On 7/12/2023 at 7:21 AM, mphdesign said:

I'm noticing the transparent overlay doesn't work on mobile and the logo doesn't show. The main menu also doesn't show up when you click on the hamburger. Do you have a solution for this?

Hi,

It looks fine to me