Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Conditional Header Formatting?


Site URL: https://advantage-writing.com/

Is it possible to conditionally format the site header?  More specifically, I am working on a site where most pages have a dark theme with a light header, but on the Home page and Contact pages I would love to have a dark header with light body theme.  Is there a custom CSS trick to conditionally apply color changes to certain pages but not others?  Thanks.

https://advantage-writing.com/ and the password is 'langley'

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

Thanks.  This approach does not allow me to change the header color on SOME pages but not ALL.  Is there a way to do this conditionally?  For example: set the header color to white by default but set the header color to black on ONLY the contact page?

Share this post

Link to post
  • 0

Use the body id tag

Example, your home page is <body id="collection-5ef60fecba0edc301161225b">

so for css use

#collection-5ef60fecba0edc301161225b .header______________________ {


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...