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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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
13 hours ago, cyclovfx said:

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

Did you solve or still need help?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.