Jump to content

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

Recommended Posts

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.

Link to comment
  • Replies 10
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

@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 */
}

Link to comment

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

Edited by JayVanDyke
Hit submit too early...

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

@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

Link to comment

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

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

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.