Using different Headers per shop or Page on Squarespace Site CSS help

Hello,

I am trying to create multiple shops within my website that have different branding by change the header to be unique per page. I have found some CSS code that should help but think i am using the incorrect header element or something. Here is my site https://trombone-wisteria-pgef.squarespace.com/config/ 

Here is the custom CSS i was trying to use

body#collection-olemiss header.Header {
    background-color: #C8102E; /* Change this to the desired background color */
}

body#collection-olemiss header.Header .Header-nav-item a {
    color: #006BA6; /* Change this to the desired text color */
}

Please help!!!!! I am going crazy.

@kodrury you'll need to add a site password to your site so we can see it. https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

But also #collection-olemiss seems odd to me considering most of SS other selectors.

@JayVanDyke- thanks for the response

site password headertest https://trombone-wisteria-pgef.squarespace.com/config/pages/65a7c55dd97f3e3d8f53241c

Still says the site is private instead of password protected. Also your link when you share should end right after .com if we go to the /config part it’ll try to log us in as editors and no one here would have access. 

@JayVanDyke Hi Jay,

Try now. I think i setup password correctly. Here is the link https://trombone-wisteria-pgef.squarespace.com/ the Ole Miss Shop is what I would like to change

@JayVanDyke this is the most recent code I used. Could not get it to work either. I was able to find the collection ID based on your feedback.

}/* Target the header based on the collection ID */
body[data-collection-id="65a7c55ed97f3e3d8f532432"] .Header {
    background-color: #C8102E; /* Change this to the desired background color */
}

/* Target the navigation links within the header */
body[data-collection-id="65a7c55ed97f3e3d8f532432"] .Header-nav-item a {
    color: #006BA6; /* Change this to the desired text color */
}

What is password?

@tuanphan headertest

@kodrury sorry! Got bogged down with client work. I don't think this is doable with just CSS alone. 

Try this in your page header code injection for js. This takes the name of the category in the URL and turns it into the class for the page so you have something different about this vs the main page. SS doesn't seem to change anything we can use to style the category pages easily.

<script>
  document.addEventListener("DOMContentLoaded", function() {
  var categoryURL = window.location.href;
  var index = categoryURL.lastIndexOf('/');
  var categoryClass = categoryURL.substring(index + 1);
  categoryClass = categoryClass.split("?")[0].split("#")[0];
  document.body.classList.add(categoryClass);
});
</script>

then for your sub pages do this but rename it based on your category names. For the /tex store it would be things like .health-leisure .kitchen .style .luxury .tech 

Any other type of character like the & will get removed and any spaces turned into "-"
 

.categoryName #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

You also have one of the background effects turned on. I think you need to turn that off for this to work.

@JayVanDyke Hi, thanks for your help with this, however, it did not seem to work. Maybe I am doing something incorrect. I performed the following steps:

1) went to edit the ole miss shop/page

2) turned off the background effects 

3) summited the code above unchanged into the Paged header Code injection and saved

4) updated the ole miss header to the colors I wanted and saved. 

5) checked the main home page and looks like the changes I made on the ole miss page propagated to the home page as well

I don't see the CSS implemented anywhere? These all need to be in your custom CSS and the background color part needs to be changed into the color you want. 

.kitchen #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.style #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.luxury #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.tech #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}

.health-leisure #sections .page-section:first-child {
  .section-background {
   background-color: #000; //change to your color 
  }
}