How to Invert the Logo on One Page in Squarespace

Recently I ran into an issue on a client site where her white logo looked beautiful on all the pages with banner images, but when I created a page without a banner image her logo was invisible - white on white. Here’s how to fix that for one page. The solution below uses code injection, available on Squarespace Business plans or higher.

How to invert the logo color on one page in Squarespace:

Step 1.

Open the page settings of the page where you want the logo color inverted.

Step 2.

Click on the Advanced tab to add the custom code in Page Settings Advanced > Page Header Code Injection.

Step 3.

For Squarespace 7.1 templates, paste in this code:

<style>
 .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Want to invert the logo on the mobile menu page in 7.1?
The simplest way to upload a specific mobile logo. Edit Site Header > Site Title and Logo, then add a Site Mobile Logo.

---

For Brine family templates, paste in this code:

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

---

For Bedford family templates, paste in this code:

<style>
#logoImage {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Step 4.

Save your work and reload your page. Your logo will now be the inverted color, so if it was white it will show up as black on just the one page. If you are only seeing the change sometimes on a Brine family template, you may need to check that AJAX loading is turned OFF in Design > Site Styles.

Inverting the navigation color on Squarespace

You may also need to invert the navigation color. To do that, add this code before the closing </style> tag.

For Squarespace 7.1 templates, paste in this code:

.header-nav-wrapper {
    -webkit-filter: invert(100%);
    filter: invert(1);
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

For Brine family templates:

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

For Bedford family templates:

#mainNavigation {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }

Looking to target a particular product page?

Those steps are a bit different, but I’ve created a video tutorial on how to invert the logo color on a particular product page.

---