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

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/2/2021 at 3:03 AM, donforello said:

@tuanphan I am afraid nothing happened when I pasted the code you supplied.... 

You can add the code & I will check again, it will be easier.

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

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.