Change Header Color On Scroll

I am trying to find the correct CSS code to change the background color of my header from transparent to black only when I scroll. Has anyone had any success with adding CSS to accomplish this?

Link: https://www.cruzthebeach.com/

Add to Home > design > custom CSS

.header-announcement-bar-wrapper.shrink {
    background: black !important;
}

this code can apply for all 7.1 sites.

On 5/31/2020 at 5:42 AM, tuanphan said:

Add to Home > design > custom CSS

.header-announcement-bar-wrapper.shrink {
    background: black !important;
}

this code can apply for all 7.1 sites.

@tuanphan

Is there a similar solution for 7.0 Brine sites?

18 hours ago, ekspohz said:

@tuanphan

Is there a similar solution for 7.0 Brine sites?

Can you share link to your site? We can check easier.

14 hours ago, tuanphan said:

Can you share link to your site? We can check easier.

The solution here worked: 

Thanks.

Hi, I'm sorry if this question is stupid, I am completely confused by Squarespace's platform.

Where exactly do we put this code? I'm putting it in Page Settings/Advanced and it's not changing my site at all.

What I'm trying to desperately achieve is a different header/footer color for different pages/menu topics. So far I've learned this is only possible with a handful of templates on 7.0, but then you're stuck with that template AND Squarespace will charge me to go backward (so that's not a solution); and utterly impossible with the very flexible 7.1.

Can anyone help?

@CompletelyConfused

Please post the URL for the page where you installed the code on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

On 2/21/2021 at 2:29 AM, CompletelyConfused said:

Hi, I'm sorry if this question is stupid, I am completely confused by Squarespace's platform.

Where exactly do we put this code? I'm putting it in Page Settings/Advanced and it's not changing my site at all.

What I'm trying to desperately achieve is a different header/footer color for different pages/menu topics. So far I've learned this is only possible with a handful of templates on 7.0, but then you're stuck with that template AND Squarespace will charge me to go backward (so that's not a solution); and utterly impossible with the very flexible 7.1.

Can anyone help?

Can you share site url? We can help easier

or try editing page where you want to change header color >> Add a Code Block (anywhere) > Paste this code

<style>
  .header-announcement-bar-wrapper {
    background: black !important;
}
</style>

Can you replace the word black with a hex value? I tried it and t doesn't seem to do anything. Is there a way to customize the header background color change (other than black in this example)?

On 4/27/2023 at 10:46 PM, Javdesign said:

Can you replace the word black with a hex value? I tried it and t doesn't seem to do anything. Is there a way to customize the header background color change (other than black in this example)?

Use this

<style>
  .header-announcement-bar-wrapper {
    background: #000 !important;
}
</style>

or

<style>
  .header-announcement-bar-wrapper {
    background: rgb(0,0,0) !important;
}
</style>