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 Do You Upload and Edit Your Site Logo in Squarespace?
You can upload your logo in the Design → Site Styles area. Follow these steps:
Go to the Design panel.
Click Site Styles.
Choose the ‘Header Layout’ section.
Upload the image you want to use for your site’s logo under the Logo setting.
Except with custom code, this logo is global.
How to Override the Default Logo Using Custom CSS?
Custom CSS lets you replace the default logo based on page-specific selectors. Here’s a basic example:
.page-id-5 .header-title-logo img {
content: url('https://yourdomain.com/path/to/logo2.png');
}
Make sure to:
Replace page-id-5 with the actual ID of your target page.
Upload the alternate logo in Site Files and copy its URL.
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 Page Header or Global Footer Code 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:
Brine Clone Variants
Rally
Paloma
Matsumoto
Hester
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 Design → 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:
.page-id-5 .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.
