How to achieve different headers on Squarespace

Question

I've tried everything remotely pertaining to Squarespace headers on other platforms and nothing is working. I have a Squarespace 7.1 website: marielapooley.com

I am needing to apply different header settings on different pages. I would love for my homepage to show the whole image behind the header and the other pages to show the tan color with white text for the header.

I have tried making the header "dynamic" or transparent for the homepage and that works great to show the whole image but then I cannot figure out how to customize the color to the header on the other pages to not be dynamic or transparent.

I have also tried custom CSS:

.page-section:nth-child(1) {padding-top:0!important} 

and also:

#colleciton-123456 .page-section:nth-child(1) {padding-top:0!important}

Those custom CSS codes did nothing to the image or header.

The hex code for the color I want for the other pages (not Homepage) is: #928A80.

The collection # for the Homepage is: #collection-65c3c4c71ae4e74d597f0ef3.

The section data for the image on the Homepage is: section[data-section-id="65c3ffc137ea2f44e9996f70"].

What can I try next?

Answer 1

AHHHH! I just figured it out!!

I'm putting the answer here for anyone else having this issue and for my own reference.

`body:not(.homepage) header#header { background-color: #928a80 !important; }

Key points:

1. Must go under Website> Website Tools> Custom CSS
2. Make sure your Homepage is set up the way you want it to look and then add the code to change the other pages header color.
3. Customize your color by adding your Hex# in the background-color line