How to Change the Logo on Different Pages in Squarespace 7.1
Squarespace 7.1 does not allow for native use of a separate logo per page. But you are free to do this; you can override the global logo by custom CSS/JS and page selectors. These are means for allowing visual diversity without altering the website-wide settings.
Where to Upload Your Logo Variants ?
Go to Pages → Custom code → Custom CSS, and click Custom Files.
Drag and drop your alternate logos here. Squarespace will give you a URL for each image — copy those, we’ll need them for the next step.
How to Override the Default Logo Using Custom CSS?
Add this code under Pages → Custom code → Custom CSS, which lets you replace the default logo based on page-specific selectors. Here’s a basic example:
#YourPageCollectionsId .header-title-logo img {
content: url('https://yourdomain.com/path/to/logo2.png');
}
Make sure to:
Replace #YourPageCollectionsId with the actual ID of your target page.
You can easily find your Page Collection ID by using the “Squarespace ID Finder“ Browser add-on.
What Page-Specific CSS Selectors Can You Use in Squarespace?
Squarespace adds unique page identifiers as classes on the body tag. Use these selectors to target specific pages:
These classes allow precise targeting for logo changes.
How to Use Code Injection to Change Logos Per Page?
Code Injection allows inline CSS or JavaScript per page. Use this method to inject alternate logos:
Open the target page.
Go to Settings → Advanced → Page Header Code Injection.
Add the following CSS:
<style>
.header-title-logo img {
content: url('https://yourdomain.com/alternate-logo.png');
}
</style>
It overrides the global logo only on that specific page.
Can You Change the Logo Based on Page URL or Slug?
Yes, JavaScript can detect the URL and change the logo dynamically.
Example code:
<script>
if(window.location.pathname.includes('about')) {
document.querySelector('.header-title-logo a img').src = 'https://yourdomain.com/about-logo.png';
}
</script>
Use includes('slug') for flexibility.
Insert into Pages → Custom code → Custom Footer or Header Injection.
How to Add Alternate Logos Using Image Blocks in Headers?
Using Image Blocks in a custom header layout allows manual logo swaps. You can:
Add a blank header section with an Image Block.
Place it above the native site header.
Hide the default logo using CSS:
.header-branding { display: none; }
This method works best for one-page sites or landing pages.
Which Squarespace 7.1 Templates Work Best for Logo Customization?
Templates using customizable header sections offer the most flexibility. Recommended templates:
These templates support custom header layouts, image blocks, and multiple sections.
When Should You Use JavaScript Instead of CSS for Logo Swapping?
Use JavaScript when the logo needs to change dynamically based on logic or user action. JavaScript is better when:
Logos depend on query parameters or real-time conditions.
CSS can't access external variables.
You need event-based interactions (scrolling, clicking).
CSS is static. JavaScript enables conditional and interactive changes.
How to Create Responsive Logos for Mobile and Tablet Views?
Media queries in CSS adapt logos to screen sizes. Example:
@media screen and (max-width: 768px) {
.header-title-logo a img {
content: url('https://yourdomain.com/mobile-logo.png');
}
}
Use multiple breakpoints: 480px, 768px, 1024px.
Ensure logos are optimized for smaller screens (SVG or compressed PNG).
Can You Use Multiple Header Sections with Unique Logos?
Squarespace 7.1 allows multiple headers via page sections. You can:
Utilise custom headers per page or section.
Use separate image logos for different parts of your site.
Not displaying the global header for a few pages.
Note: This is best used on Index Pages or Page Layouts.
How to Revert to the Original Logo Site-Wide?
You need to take out all of the custom CSS and scripts so the whole world can see the logo again.
Steps:
Go to Pages → Custom code → Custom CSS.
Delete any. header-branding overrides.
Or disable JavaScript in your Code Injection areas.
If you had the original header hidden and you want it back!.
The global logo (from Site Styles) will appear on the site.
Frequently Asked Questions (FAQ)
1. Is there a way to use a different logo on each page in Squarespace 7.1?
By default, Squarespace 7.1 employs a global logo, but of course, you’re able to overwrite it via CSS & JavaScript and to show different logos on different pages.
2. Where else do I typically upload my logo in Squarespace?
Here you can upload your default site-wide logo:
Design > Site Styles > Header Layout > Logo
This is the header logo that will “takeover” all your pages, unless you want to specify a different custom banner design for individual posts or specific pages using added custom code.
3. What is the easiest way to replace the logo on a single page?
Use custom CSS with page-specific selectors:
#YourPageCollectionsID .header-branding img {
content: url('https://yourdomain.com/path/to/logo2.png');
}
Replace .page-id-5 with your page’s actual ID and use your uploaded image URL.
4. How do I find the correct page ID or class to use in CSS?
Squarespace assigns a unique .page-id-xxxxx class to each page’s <body> tag. To find it:
Open the live page.
Right-click > Inspect.
Look at the <body> tag or search for page-id.
5. Can I change the logo without using site-wide custom CSS?
Yes. Use Page Header Code Injection for a single page:
This affects only that page, making it safer and more targeted.
