We'll guide you through how to use code to make your website logo white on selected pages. Please note that this code only applies to Squarespace 7.1 websites, if your site is on 7.0 it won't work. The code targets the logo image file you have uploaded to the logo field, it won't work for standard image blocks that you have added to the page.

Instructions

Step 1

Navigate to Website > Pages > scroll down to the very bottom of the list > click Custom CSS

Step 2

Paste in the following code. Replace '#collection-id-here' with the collection ID of the page you would like the logo to be white on. If you're unsure how to get the collection ID of the section read our guide on how to get Collection IDs & Block IDs.

/**MAKE LOGO WHITE**/

#collection-id-here {
 .header-title-logo img {   
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
}

/**END MAKE LOGO WHITE**/

Step 3

Click 'Save' in the top left corner of the screen. You may need to refresh the page for the change to take effect.

Optional

If you need the logo to be white on more than one page, you can add other collection IDs to the code. Just separate them with a comma. Example:

/**MAKE LOGO WHITE**/

#collection-id-one-here, #collection-id-two-here, #collection-id-three-here {
 .header-title-logo img {   
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
}

/**END MAKE LOGO WHITE**/