Jump to content

Invert logo color for first section on page only?

Go to solution Solved by E-W,

Recommended Posts

The first section of many pages on the site are dark so I'd like to invert the logo to be white on those sections only. The rest of the pages below are lighter color so I want it black for those sections. Is this possible? I haven't been able to get any code to work.  It seems like the logo loads once per page and that's what you're stuck with. Is this correct? Is there a way to do this with Javascript?



PW: admin

Link to comment
  • Solution

SOLVED: with code from this post:


I modified the code. This is what I used to achieve a color-changing logo on scroll. However, I still need to figure out how to make the burger menu change color on scroll too.


/* Change logo on scroll */
.shrink .header-title-logo img {
visibility: hidden;
transition: all 0.3s;
.shrink .header-title-logo a {
background-image: url(https://static1.squarespace.com/static/65a2d78aa72f1c4f2b2f30fe/t/6614307825e9e667d79278b4/1712599160701/Kristy-Burrell-Photography-Vermont-Wedding-Photographer-Logo-Black.png);
background-size: contain;
background-repeat: no-repeat;


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.