How to change your logo on a specific page in Squarespace

Is the logo on your Squarespace website perfect for every page, except one?!
Then I’ve got good news for you - this tutorial will teach you how to fix it with CSS! 🙌

If you use an image for your site logo, I’ll teach you how to upload an alternative, and how to use custom code to replace the logo on specific pages.

Be sure to watch the video so you know how to use the codes below.

Here are the steps you’ll need to take to change the logo on one page of your Squarespace site:

1. First, you’ll need to upload the image.

2. Click on Website, then Website Tools, then custom CSS.

3. Click on Custom Files & upload your alternative logo image file here.

4. Paste the code below into your Custom CSS.

5. Click on the image to replace the placeholder text with the URL for your image.

6. Cut that text out of your CSS; you’ll need it, but not there!

7. Navigate to the page you want this alternative logo to be on.

   • If you’re using a business or commerce plan for your Squarespace website, click on the gear icon to access your Page Settings, and then click on Advanced.

   • If you’re using a personal plan, click on Edit to edit the page, and add a code block to the first page section. Pro tip: Make sure you are editing the page, and not working in the footer!

8. Update this code below to contain the URL for your image.

<style>
.header-title{
background-image:url('**image-url-here**');
background-size: contain
}
.header-title img{
opacity:0
}
</style>

Important Info: this only changes the desktop logo! Your mobile logo will stay the same.