How to change your logo on a specific page in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
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.
If this is your first time using CSS for Squarespace awesome! I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn
Video tutorial
Code Example
First, you’ll need to upload the image.
Click on Website, then Website Tools, then custom CSS.
Click on Custom Files & upload your alternative logo image file here.
Paste the code below into your Custom CSS.
Click on the image to replace the placeholder text with the URL for your image.
Cut that text out of your CSS; you’ll need it, but not there!
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!
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>
