How to add a different site logo to a specific page - Squarespace 7.1

There might be an occasion where you want to add a different site logo to an individual page. Well, here’s the code that can make it work.

Instructions:

  • Upload your image to Custom CSS (Website -> Website Tools -> Custom CSS)

  • Select “Custom Files” and upload the image here

  • Then click on that URL, which will display it within the Custom CSS area.

  • “Cut” that URL

  • Go to the specific page in question

    • Settings (This is the cog icon)

      • Advanced

Then paste in the below and replace the following URL “https://static1.squarespace.com/static/“ with your own URL that has been made via the uploaded file.

<style> 
div.header-title-logo a {
content:url("https://static1.squarespace.com/static/") !important;     
max-width: 300px;
}
</style>

Using a specific Mobile Logo as well?

If you are also using the “Mobile Logo” as well, then you can use the code below to override the default.

Note: You don’t need to use this if you’ve only used the main ‘logo’ into the site.

<!-- Mobile Only Logo -->
<style> 
  div.header-mobile-logo img {
content:url("https://static1.squarespace.com/static") !important;     
max-width: 300px;
}
  
</style>
Previous
Previous

How to invert your site logo - Squarespace 7.1

Next
Next

How to hide pagination on blog posts - next and previous Squarespace 7.1