InsideTheSquare.co

View Original

How to show a different logo on a single page in Squarespace - Brine Theme

This tutorial is for the Brine theme available in Squarespace 7.1 and will not work in other versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to change the logo on a single page in Squarespace 7 sites built with the Brine theme.

A few important things to note before you copy and paste this into your own site:

  • There is more than one way to do this! This is just one approach of many because code is super customizable.

  • You can use a JPG or a PNG or even a GIF; any of those formats will work in this code.

  • If you are on a personal subscription plan and don’t have access to page header code injection, you need to use an on page code block instead. If you have no idea what that means, check out this tutorial for more info:
     https://insidethesquare.co/squarespace-tutorials/single-page

Here is the code from this tutorial. Be sure to update the placeholder text for the image that you uploaded to your own Squarespace site!

<style>
.has-logo-image .Header-branding img{
display:none
}
.has-logo-image .Header-branding{
background-image:url(url-goes-here);
background-size:contain;
background-repeat:no-repeat;
background-position:center
}
</style>