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

On 7/9/2023 at 4:57 AM, tuanphan said:

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;
}

Can we do this for all pages? Not just the homepage...

On 1/25/2024 at 2:47 AM, christie said:

Can we do this for all pages? Not just the homepage...

Just remove body.homepage from the code