Change Header Background Color on any given page?

Site URL: https://littleboxestrial.squarespace.com/

Hi,

So I know the Header Color = the first section color, but is there a way to make the header color a different color than the first section?

I know you can change it in the page design settings, but if I choose a color for the header there, it's site-wide. I'm hoping for a fix where I can change header background color on only specific pages.

The way you used to be able to do this was toggling "default color" off in 7.1, but it seems Squarespace got rid of that feature, which is upsetting!

Thanks for any help.

What is access password?

@tuanphan letmein

Add to Page Settings > Advanced > Header

<style>
  .header-nav-list a, nav.header-menu-nav-list a {
    color: red !important;
}
</style>

On 5/31/2020 at 8:47 PM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  .header-nav-list a, nav.header-menu-nav-list a {
    color: red !important;
}
</style>

 

Hi @tuanphan - this only changes the header navigation text, not the background - can you help with the background colour? Thanks!

On 5/30/2020 at 11:30 AM, kindandbrave said:

Site URL: https://littleboxestrial.squarespace.com/

Hi,

So I know the Header Color = the first section color, but is there a way to make the header color a different color than the first section?

I know you can change it in the page design settings, but if I choose a color for the header there, it's site-wide. I'm hoping for a fix where I can change header background color on only specific pages.

The way you used to be able to do this was toggling "default color" off in 7.1, but it seems Squarespace got rid of that feature, which is upsetting!

Thanks for any help.

Hey @kindandbrave did you ever get a solution for this that worked? Thanks

On 8/6/2022 at 5:44 AM, MadebyMarkham said:

Hi @tuanphan - this only changes the header navigation text, not the background - can you help with the background colour? Thanks!

Use this code

<style>
  header#header {
  	background-color: red !important;
  }
</style>