Your Squarespace logo often appears as a single color by default, but you might need a full-color logo on specific pages—like a homepage with a dark background or a campaign landing page. Squarespace doesn’t natively support page-specific logo variations out of the box, but with a bit of targeted CSS, you can pull off this trick cleanly.
Why Change the Logo to Full Color?
A monochrome or simplified logo can look great on a clean header, but on a hero image or a dark overlay it can lose legibility, or clash with your palette. A full-color version can:
- Maintain brand consistency across diverse backgrounds.
- Improve readability on image-heavy or dark sections.
- Align with seasonal campaigns or special landing pages.
The goal is to swap logos per page, not replace your global logo. Think of it as a per-page style override.
Plan Your Per-Page Logo Strategy
Each Squarespace page (or section) has a unique ID in the HTML, like #collection-641234567890abcdef. You’ll use that ID in CSS to:
- Hide the default logo on that specific page.
- Inject a full-color logo image using CSS.
Start by gathering:
- The exact URL of the full-color logo image.
- The page or collection ID for each page where you want to change the logo.
- A staging or test site if possible, to avoid breaking your live site.
Inserting Full-Color Logo with Page-Specific CSS
Step 1: Find the Page ID
Open your browser’s developer tools (right-click > Inspect Element). Look at the <body> tag; often has a id attribute like collection-xxxxxxxxxxxxx. Note that for each page where you want a different logo.
Step 2: Add a Custom CSS Snippet
In Squarespace, go to Design → Custom CSS. We’ll use something like:
#collection-xxxxxxxxxxxxx .header-title-logo img {
display: none;
}
#collection-xxxxxxxxxxxxx .header-title-logo a {
background: url('YOUR_FULL_COLOR_LOGO_URL') no-repeat center center;
background-size: contain;
display: block;
width: 200px; /* adjust as needed */
height: 60px; /* adjust as needed */
}
Replace YOUR_FULL_COLOR_LOGO_URL with your full-color logo URL, and the collection ID with your page ID. You’ll want to adjust the width/height to match your header.
Step 3: Fine-Tune Placement & Sizing
You might need to tweak:
background-size: contain;vs. explicit width/height.paddingormarginto align with navigation.- Use a mobile media query if needed for responsiveness.
Per-Page Conditional Code Injection (Advanced Method 24)
If you want to avoid CSS hacks, you can use Squarespace Code Injection with JavaScript:
<script>
var pageId = document.body.id;
var allowedPages = ['collection-aaa111', 'collection-bbb222']; // your page IDs
if (allowedPages.includes(pageId)) {
var logoLink = document.querySelector('.header-title a');
if (logoLink) {
logoLink.innerHTML = '<img src="YOUR_LOGO_URL" style="width:200px;height:auto;">';
}
}
</script>This script runs only on specific pages, avoids CSS specificity battles.
Test, Validate & Monitor
Test each pages:
- Desktop and mobile.
- Different backgrounds (image, solid color).
- After Squarespace updates (they can change class names).
If the logo disappears, inspect elements to ensure:
- Still valid collection ID.
- Correct selector (Squarespace sometimes changes class names.
- Hosted logo image URL is still accessible.
Performance & SEO Notes
For small logos, inline SVG can be even better—no extra HTTP requests.
Wrap-Up
This trick keeps your brand intact across all pages. Just:
- Plan your page IDs.
- Use CSS or JS to swap logos.
- Test and tweak for responsiveness.
Once set, you can update the CSS. No need for plugins.
