How do I invert the logo colour on a single Squarespace page?

Depending on the background image you are using, we sometimes need to invert our logo colour on a single page so it stands out and is not lost. There is a simple piece of code needed to achieve this, and I’m going to show you how!

Step 1

Select the page that you need to apply the code to, and click on the cog icon that will appear when you hover over the page in your menu panel (this will take you to the page settings).

Step 2

Once the page settings pop up appears, click on ‘Advanced’ - this is the last choice on the left hand list.

This is where you will paste the code below:

<style> .header-title-logo img {

    -webkit-filter: invert(100%);

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

By putting the code here instead of the main Custom CSS area under the design tab, it is telling your website that you only want this code to apply to this page.

Step 3

Hit save, and you should see your logo has inverted (a before and after of my mock up can be seen below)! This works particularly well for black and white logos, but you may need to be wary of using this feature with coloured logos. As you can see in the image above, Squarespace only allows those on Business or Commerce plans to inject code on an individual page.