Jump to content

Change the header's color when scrolling down

Go to solution Solved by Web_Solutions,

Recommended Posts

Hello everyone,


I have managed to make the header of my website transparent on the main page. I also found a snippet of css that makes it change color when scrolling down (you can check it at https://gregoirepansu.com/ - the header becomes dark gray when scrolling down).

I have tried to replicate both of these things on my portfolio project pages. I managed to make the header transparent, but unfortunately can't seem to be able to make it change color when scrolling down. (see it on https://gregoirepansu.com/en/gallery1/landscapes - when scrolling down, the header stays transparent).

The bit of code i use for the homepage is the following : 

.tweak-fixed-header .shrink.header {
  background: #2A2829 !important;  

I tried using the item ID for the pages in order to target them directly, but it didn't work. I then tried adding this bit of code as a code block, no results either. And I can't inject it in the portfolio project pages, because they don't have that option. 


Does anyone have an idea about what I'm doing wrong ? I feel like it is a simple mistake which i'm overlooking lol


Thank you so much !

Link to comment
19 hours ago, Web_Solutions said:

If you add this code on Custom CSS section then it will work perfectly. You can also add a specific color for this page by replace #2a2829 to your color code. 

#item-617099f38dedf825f53792f6 header#header.shrink {
  background: #2a2829 !important;


It worked, thank you so much !

Link to comment

Create an account or sign in to comment

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

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.