Jump to content

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

Recommended Posts

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?

Link to comment
  • Replies 11
  • Views 802
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

Link to comment
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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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. 

Joel Brecknell  Digital Compositor.jpg

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.