Changing logo colour on homepage vs other pages - Marta theme

https://independent-leaders.squarespace.com/

We're trying to work out a way to make the logo white on the homepage and black across all other pages on the site.

Any ideas? I've played with the custom CSS but not yet able to make any of it work!

Cheers

Hello @wlinard:

You can use this CSS, inserted via the CSS Editor to invert the color of the image on the home page only. Do keep in mind that this only works on the latest browsers. Older browsers don't support it.

.homepage .Header-branding-logo {
 -webkit-filter: invert(100%);
 filter: invert(100%);
 filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

If you need to support older browsers, you're going to need a combination of solutions (see comments at bottom).

Also, keep in mind that if Squarespace ever changes the code on your template, this code that I've provided may break and need to be updated.

If this answers it for you, consider marking this answer accepted. Or wait and see what others offer up. You can inquire further as well!

-Brandon

PS: Code is provided without any warranty, expressed or implied. Use at your own risk.

Hi @BrandonW

Thanks for the code you've provided. It works for my site (inverting a black logo to white on the homepage) on web browser on a laptop but when it comes to using the website on a mobile device, (iPhone or iPad) it resorts back to the black version instead of inversing it to white.

Do you have any ideas of why it might do that or how to fix it?

Many thanks,

Max

It will depend on the template. Perhaps try asking a new question and including a link to the site/page in question.

-Brandon
Project Mgr. and Developer at Ignertia
Creator of Squint - Custom Text Styles & Classes for the Squarespace Text Editor

For others who may have a similar issue, the solution for mobile would be to simply add an additional selector to target the mobile logo in addition to the full-width logo.

That's a great idea! I had to change a couple of of elements for it to work with Fulton template:

#collection-5a9dbee8c83025e162cb3ffc #logoImage img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

Note that the collection id is unique to your own page. You can find it with the browser inspector.