How to Make Your Squarespace Logo White on Specific Pages (The CSS Fix)
How do I make my Squarespace logo white on just one page?
To turn a dark logo white on a specific Squarespace page (usually to contrast against a dark background image), you need to inject a small piece of CSS into that page's header. Go to Page Settings (the gear icon) > Advanced > Page Header Code Injection, and paste the following code snippet. Note: This feature requires a Business/Core plan or higher.
As a Platinum Squarespace Circle Member based in the UK, I’ve designed over 1,000 websites for clients ranging from high-end architecture firms to moody luxury drinks brands. One incredibly common design hurdle we face is the "disappearing logo."
You know the scenario: You have a beautiful, sleek dark logo—perhaps charcoal or solid black—that looks fantastic on your white homepage background. But then, you create a "Services" page with a dramatic, dark photographic header. Suddenly, your branding vanishes into the background shadow.
Squarespace’s native header styles are excellent, allowing for dynamic changes between solid colors and transparent overlays. However, they sometimes struggle to neatly swap a dark image file for a light image file based on the page background without complex workarounds.
The cleanest, fastest, and most reliable way to solve this—without uploading multiple versions of your logo—is with a precise piece of Custom CSS.
Below, I’m sharing a snippet from my personal development toolkit that I use on almost every bespoke build.
The Challenge: Branding Consistency vs. Legibility
Maintaining brand consistency is paramount. You want your logo in the same spot, at the same size, on every page.
When we build sites for luxury brands or creative portfolios (like TV producers or photographers), we often use full-bleed, cinematic hero images at the top of pages. If the client's logo is black, and the image is dark, the brand becomes invisible.
A professional website does not compromise on legibility. We need that logo to "pop," and the easiest way to make a dark object pop against a dark background is to turn it stark white.
While you could upload a white version of your logo file and try to use Squarespace’s dynamic header settings to swap it, I find this method clunky. It often results in a "flicker" as the page loads, or the two logo files might be slightly different sizes, causing a jarring shift.
CSS is superior here because it takes your existing logo file and mathematically recolours it in the browser, ensuring perfect placement and zero load-time flicker.
The Expert Solution: The CSS "Invert" Trick
This solution uses CSS "filters." Think of it like applying an Instagram filter to your logo, but one designed purely to manipulate color values.
We are going to tell the browser: "On this specific page, find the logo image, turn it solid black, and then invert that black into solid white."
The Code Snippet
Here is the exact code you need. I will explain how to deploy it in the next section.
<style>
/* Target the header logo image and invert its colour */
.header-title-logo img {
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
}
</style>
Step-by-Step Instructions: Applying the Fix
To ensure this change only happens on one specific page, we cannot put this code in your main "Custom CSS" panel. If we did, your logo would turn white on every single page of your site, ruining it on your white backgrounds.
We need to use Page-Level Code Injection.
Note for UK Users: To access Page-Level Code Injection, your Squarespace subscription must be on the Business (Core) plan or higher. The Personal (Basic) plan does not support this feature.
Step 1: Navigate to the Page
Log into your Squarespace editor and navigate to the specific page where your logo currently looks too dark against the background image.
Step 2: Open Page Settings
Find the page in your main navigation menu on the left. Hover over the page name and click the gear icon (Settings) next to it.
Step 3: Access the Advanced Tab
In the pop-up window that appears, you will see several tabs on the left (General, SEO, Social Image, etc.). Click on the bottom tab labelled Advanced.
Step 4: Inject the Code
You will see a large text box titled Page Header Code Injection.
Copy the exact code block I provided above—including the opening <style> and closing </style> tags—and paste it directly into this box.
Step 5: Save and Refresh
Click Save in the top left corner of the settings window.
Your editor will refresh. If done correctly, your dark logo should now be crisp, bright white on that specific page. Navigate to a different page (like your homepage) to verify the logo is still its original dark color there.
A Technical Deep Dive: How It Works
Why does this work so well? Let's break down the CSS properties:
.header-title-logo img: This is the "Selector." It tells the browser precisely what element we want to change. In Squarespace 7.1, this selector targets the image tag situated inside the header title container.filter: brightness(0): Imagine turning the brightness knob on a screen all the way down. No matter what colour your logo was originally (blue, red, grey), reducing brightness to zero turns it into a solid black silhouette.invert(1): This takes whatever colour we currently have and flips it to its opposite on the colour wheel. The opposite of solid black is solid white.-webkit-filter: This is just a backup to ensure the code works on older versions of browsers like Safari (often used on iPhones/iPads).!important: This is a "brute force" command. It tells Squarespace's template: "Ignore whatever colour settings you usually have for the header; this code takes priority."
By combining brightness(0) and invert(1), we create a foolproof method to turn any coloured logo into a clean white asset.
Troubleshooting Common Issues
As an expert building complex sites, I know that things sometimes don't work the first time. Here are the common pitfalls:
"I don't see the 'Advanced' Tab in Page Settings."
The Cause: You are almost certainly on the Personal (Basic) Squarespace plan. The Fix: You must upgrade to the Business (Core) plan or higher to unlock code injection features. In the UK market, this is usually a jump from around £12/mo to £17/mo (excluding VAT).
"The code is pasted, but nothing changed."
The Cause: You might be using an older version of Squarespace (version 7.0), which uses different CSS selectors. The Fix: The code provided is optimized for Squarespace 7.1 (the current standard). If you are on 7.0, you will need to find the specific block ID or class name for your template's logo, which requires using browser developer tools.
"My logo turned white, but so did my navigation links."
The Cause: The CSS selector might be too broad, or your template is structured differently. The Fix: The code snippet provided specifically targets .header-title-logo img to avoid this. Ensure you copied it exactly. If your links are changing too, you likely need a more specific selector tailored to your specific header layout.
Using snippets like this is how we elevate a standard Squarespace template into a bespoke digital experience. If you are struggling to get your branding looking sharp across different page environments, don't hesitate to reach out to a certified expert.
