custom header for "home page" with dynamic style

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.

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.

 

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

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

Site-wide password so we can see the site?

Thanks for the quick response. And sorry. I just started. and don't have much experience with CSS. could you help me to figure out where to get the id information?  

the pass is CYCLOXXX

I found a chrome extension Squarespace ID Finder. will try this.  😄

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

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

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. 

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.

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

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) 

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

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.

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.

Try this

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

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

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

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

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!

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?

7 hours ago, tuanphan said:

Did you solve or still need help?

Yes. Problem solved. Thank you very much!

I tried this, but now on my pages that have a white background, some of my tabs in my header are not showing up

On 6/8/2023 at 3:04 AM, EmilyMMorris said:

I tried this, but now on my pages that have a white background, some of my tabs in my header are not showing up

 

What is your site url?

On 6/9/2023 at 1:00 AM, tuanphan said:

What is your site url?

https://broccoli-rhubarb-djde.squarespace.com/config/pages