Change / invert logo on same page on different background colors

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 🙂

Hi. If you share link to your site, we can help easier

Hi, I would also like to invert my logo on some pages. I am using the Margot template- I have not paid for my site yet so am not able to get a link. Will I have to pay for my site and let it go live before finishing it?

Thanks so much, 

Emma

I also have a problem where my logo disappears when on the mobile size! IS this something that it is possible to fix as well ?

If your site is private/trial, you can setup password & share url

@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

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);
}

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

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.

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

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

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.

This is to several of the folks here looking for a solution.

Would the fixed header with the Basic style work for you?