Jump to content

custom header for "home page" with dynamic style

Go to solution Solved by tuanphan,

Recommended Posts

4 hours ago, cyclovfx said:

Site URL: https://cyclovfx.squarespace.com

Hello,

 

I wanted to ask how I can have a different header style for my homepage. Which would be a Dynamic setting where I can have the background of the section below going into the header.

But for other sites I would like to keep it as solid black.

 

533952199_DynamicBGheader.thumb.jpg.d605b63936778a7f408ee9fbbe037736.jpg294725535_Solidheaderstyle.thumb.jpg.6dac248611221179394633df02e4c583.jpg

Transparent header when it is at the top of page and black solid when you scroll down, right?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

You can use a NOT selector to make adjustments to headers on every page that is not the homepage. Basically, you would tell it that every page NOT identified by the homepage ID gets a different header styling (in this case, a solid black). The CSS would look something like this.

body:NOT([id*="123456789"]) {
  #header {
      background-color:#000;
   other classes and styles
  }
}
Link to comment
18 hours ago, Jennika said:

You can use a NOT selector to make adjustments to headers on every page that is not the homepage. Basically, you would tell it that every page NOT identified by the homepage ID gets a different header styling (in this case, a solid black). The CSS would look something like this.

body:NOT([id*="123456789"]) {
  #header {
      background-color:#000;
   other classes and styles
  }
}

I think I didn't get it correctly ..... this CSS will give all other headers a black solid instead of the "dynamic style" that is defined for the homepage. Is that correct?

- I tried #collection-62c695b5e721f57173873af3 (which is the header id of the "home page" .. instead of id*  

- not sure what to change for "other classes and styles"

body:NOT([#collection-62c695b5e721f57173873af3]) {
  #header {
      background-color:#000;
   solid
  }
}

Link to comment

I think I found a work around to my problem. Just added a empty section 1 row under the header. that way I could block the BG image from the section below, so it won't go into the header. It's not ideal (because it makes the header bigger)  but for now it kinda works. 😄

Edited by cyclovfx
Link to comment

Yes, with the NOT selector, it would look to see if the page ID matches the homepage. If it does not match the homepage ID, then it would add whatever CSS you've defined for the not homepage header. 

All of the style for the black header (not homepage) goes inside the body:NOT tags, similar to how you would style your normal header. Here is an example using just really basic styling.

body:NOT([id*="collection-62c695b5e721f57173873af3"]) {
  #header {background-color:#000 !important;}
  #site-title {color:#fff;}
.header-nav-item a {color:#fff;}
}

"Other classes and styles" meant you needed to add whatever ids (i.e. #header), classes (i.e. .header-nav-item a), and their associated styles (i.e. color:#fff;) to make the header look how you want. 

Link to comment
49 minutes ago, Jennika said:

Yes, with the NOT selector, it would look to see if the page ID matches the homepage. If it does not match the homepage ID, then it would add whatever CSS you've defined for the not homepage header. 

A few small things worth adding for the benefit of anyone learning this:

  • :not() is a pseudo-class. It is added to a selector to prevent specific items from being selected
  • it is convention to write it in lowercase
  • a Squarespace site's homepage has a "homepage" class, so it is usually easier to use this (.homepage) instead of the page's unique page ID.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
5 hours ago, paul2009 said:

a Squarespace site's homepage has a "homepage" class, so it is usually easier to use this (.homepage) instead of the page's unique page ID.

thanks! this did the final trick for the hompage to act correctly. 

body:not(.homepage) {
  #header {background-color:#000 !important;}
  #site-title {color:#fff;}
.header-nav-item a {color:#fff;}
}

 

Edited by cyclovfx
Link to comment
  • 1 month later...
22 hours ago, cyclovfx said:

hello. may I ask if it is possible to add another exception for other pages I would like to have the same header look?  I tried to add another page into the script. but it screwed up everything  😄 

currently not working added page:

body:not(.homepage) (/rom) 

This code is invalid. Which page you want to add the code? We can adjust it for you

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

hello Tuan. thanks for the reply. would be nice to get one example for this page

/all-of-us-are-dead-breakdown

the reason behind that. is that for some pages I would like to keep the background video fully shown on top of the page. instead of the black bar that's been covered by the Header.

image.thumb.png.a3c75786f2453d7ed04fd752c274f6ff.png

Link to comment
On 9/9/2022 at 3:57 PM, cyclovfx said:

hello Tuan. thanks for the reply. would be nice to get one example for this page

/all-of-us-are-dead-breakdown

the reason behind that. is that for some pages I would like to keep the background video fully shown on top of the page. instead of the black bar that's been covered by the Header.

image.thumb.png.a3c75786f2453d7ed04fd752c274f6ff.png

Try this

body:not(.homepage), body:not(#collection-62d533a916735d11ae3f80bd) {
  #header {background-color:#000 !important;}
  #site-title {color:#fff;}
.header-nav-item a {color:#fff;}
}

 

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
On 9/10/2022 at 5:19 PM, tuanphan said:

Try this

body:not(.homepage), body:not(#collection-62d533a916735d11ae3f80bd) {
  #header {background-color:#000 !important;}
  #site-title {color:#fff;}
.header-nav-item a {color:#fff;}
}

 

Hi Tuan. Thanks for the suggestion. But it doesn't seem to work. 😕 

Link to comment
On 9/13/2022 at 11:40 AM, cyclovfx said:

Hi Tuan. Thanks for the suggestion. But it doesn't seem to work. 😕 

You mean, this page & homepage, header should be transparent?

https://cyclovfx.squarespace.com/all-of-us-are-dead-breakdown

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
  • Solution
22 hours ago, cyclovfx said:

correct. I am looking for a way to do exception for other pages beside the homepage.

Don't remove any code in your current code. Add this to Design > Custom CSS > then save & reload the site

body#collection-62d533a916735d11ae3f80bd header#header, body.homepage header#header {
    background-color: transparent !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
30 minutes ago, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS > then save & reload the site

body#collection-62d533a916735d11ae3f80bd header#header, body.homepage header#header {
    background-color: transparent !important;
}

 

thanks. that seems to work. and I also tried for other pages I want to add as an exception.  Thank you very much!

Link to comment
  • 8 months 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.