Jump to content

Changing logo colour on homepage vs other pages - Marta theme

Recommended Posts

  • Replies 5
  • Views 9.2k
  • Created
  • Last Reply

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

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!


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

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 1 year later...

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,




Link to comment
  • 4 months later...
  • 1 month later...

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

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

Link to comment


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.