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

Change Header Color On Scroll


JaydenLCruz
Go to solution Solved by tuanphan,

Question

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 to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Each template needs different code. Can you share link to your site?

9 answers to this question

Recommended Posts

  • 0

Add to Home > design > custom CSS

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

this code can apply for all 7.1 sites.

Link to post
  • 0
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?

Link to post
  • 0
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.

Link to post
  • 0

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?

Link to post
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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>

 

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