Is there a way to change the header from solid to adaptive only on the home page?

My header on all pages is currently set to solid on my Squarespace website. Is there a way to only change the home page header to be adaptive instead of solid while keeping the header solid on the rest of the pages?

Can you share link to homepage? We can check easier

@tuanphan 

https://www.joelbrecknell.com/ this is the link to the homepage

You can use this code to Website > Website Tools > Custom CSS.

body.homepage .header-background-solid {
    background-color: transparent !important;
    opacity: 0 !important;
}

body.homepage .header-blur-background {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@tuanphan Thank you so much that worked perfectly!

Is there a way to have it so that its transparent until I start scrolling down the page then the solid background will come back. I pretty much just want all the traits of the adaptive header. Is this possible?

On 5/31/2024 at 2:49 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS.

body.homepage .header-background-solid {
    background-color: transparent !important;
    opacity: 0 !important;
}

body.homepage .header-blur-background {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

 

Remove it & use this new code

body.homepage header#header:not(.shrink) .header-background-solid {
    background-color: transparent !important;
    opacity: 0 !important
}

body.homepage header#header:not(.shrink) .header-blur-background {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important
}

@tuanphan Awesome that's so much better, thank you! Is there a way to have it fade on to solid and off nicely like how the normal adaptive header fades on and off.

The video attatched shows how the normal adaptive header fades on and off.

Use this CSS code

body.homepage header#header:not(.shrink) .header-background-solid {
    background-color: transparent !important;
    opacity: 0 !important;
    transition: all 0.3s !important;
}

body.homepage header#header:not(.shrink) .header-blur-background {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important
    transition: all 0.3s !important;
}
body.homepage .header-background-solid, body.homepage .header-blur-background {
    transition: all 0.3s !important;
}

@tuanphan this is perfectly how I want it to fade. The only thing is I'm still able to see the header when its supposed to be turned off and it has this blurred look. I have a grain effect turned on for the background image don't know if this information helps. I for some reason only see the blurred header issue on mobile devices. Not seeing it on my desktop. I tried setting it back to the previous code you sent me and the blur problem wasn't there yet so It only started happening once we started adding the fade. Is there a solution that can fix this blur artifact while keeping the fade?

The image attached shows the blurred header artifact I'm talking about. 

@tuanphan Hey sorry not sure if you've seen my last message. Is this possible?

Does anyone have a solution to this?