Jump to content

Change / invert logo on same page on different background colors

Recommended Posts

Hey guys,

I am trying to start my page, having my logo in white, as the first section of it is in a very dark color. As you scroll down, I would like the logo color to change into black, as soon as the logo "touches" the second section and will remain black for the rest of the page.

Is there a way to accomplish this? 

Would HIGHLY appreciate any help on this 🙂

Link to comment
  • Replies 12
  • Created
  • Last Reply
On 1/24/2021 at 12:14 AM, donforello said:

@tuanphan I attached the site below. On the first section, the logo may remain white (on the dark background) and then I would like it to become black for the remaining page, as you scroll and also be black on the other pages. I do have the logo in black as well.

 

site: https://greyhound-alpaca-f863.squarespace.com/

password: alpaca

Add to Design > Custom CSS

body:not(.homepage) .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
23 hours ago, donforello said:

@tuanphan thanks for getting back to me.

 

I have added the above code but it does not seem to invert the logo colour + hamburger icon colour when scrolling through different sections. 

Sorry, Misread your question. If you want this "through different sections. "

, I can't help.

you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

I'm trying to figure out this exact same thing. Has anyone been able to make progress on this?

I believe it's JavaScript but not sure how to go about it.

Link to comment

Archived

This topic is now archived and is closed to further replies.

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