How to Add a Second Logo to Your Squarespace 7.1 Header (Step-by-Step Guide)
Squarespace’s 7.1 templates are slick, and the editor is easy, but its native logo settings only allow one logo upload. Whether you're co-branding with a partner or just want to display a sponsor logo, putting your second logo in your website’s header can take your design up a notch.
In this tutorial, we’ll show you exactly how you can add a second logo to your Squarespace 7.1 header using the custom code injection method; no third-party plugins, hacks, or workarounds needed.
Why Squarespace Doesn’t Support Two Logos by Default
Squarespace 7.1 operates under the assumption that each site has only a single primary logo. That makes design easier for most, but it reduces flexibility for:
Businesses Behind Co-branded Partnerships
Sponsor or event partnerships
Designers who would like to have a logo on both sides of the header
Fortunately, with an easy mix of HTML, CSS, and some JavaScript, you can manually add and style a second logo in your header anywhere that you want.
Step-by-Step: Add a Second Logo to Your Header
Step 1: Upload Your Second Logo Image
Navigate to Settings → Files in your Squarespace dashboard
Upload your second logo file (PNG, SVG, or JPG recommended)
Copy the full image URL — you’ll use this in the code
Example:
https://static1.squarespace.com/static/your-second-logo.png
Step 2: Inject JavaScript to Add the Logo
Go to: Settings → Advanced → Code Injection → Header
Paste the following code:
<!-- Add Second Logo -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var secondLogo = document.createElement("img");
secondLogo.src = "https://upload.wikimedia.org/wikipedia/commons/7/75/Squarespace_Logo_2019.png"; // Replace with your image URL
secondLogo.alt = "Second Logo";
secondLogo.className = "second-logo";
var headerInner = document.querySelector('.header-title-logo');
if(headerInner) {
headerInner.appendChild(secondLogo);
}
});
</script>
Don’t forget to replace the src with your uploaded logo’s URL.
Step 3: Style the Second Logo Using CSS
Head over to Go to Pages → Custom Code → Custom CSS
Add this code to style the second logo:
/* Style the second logo */
.second-logo {
max-height: 40px;
margin-left: 20px;
}
/* Responsive mobile styling */
@media screen and (max-width: 767px) {
.second-logo {
max-height: 30px;
margin-left: 10px;
}
}
Adjust the size or margin to fit your header layout and maintain visual balance.
Bonus Customizations
✔ Place Logos on Opposite Sides
To separate your logos across the header, add this Flexbox styling:
.header-title-nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
This will push one logo to the left and the other to the right.
Make the Second Logo Clickable
Want the second logo to link to another page or external site? Modify the JavaScript like this:
var link = document.createElement("a");
link.href = "https://yourlink.com"; // Your destination URL
link.appendChild(secondLogo);
headerInner.appendChild(link);
This wraps the logo in a clickable anchor tag.
Final Thoughts
Although Squarespace 7.1 does not have an in-built function to create a dual-logo header, this simple workaround will ensure you have complete freedom and flexibility:
100% responsive and device-ready both on desktop and mobile.
Supports individual logo styling
Great for collaborations, partnerships, or creative branding
Easy to use — no plugins required
Pro Tip: Always check out how your changes are looking on tablet and mobile before saving them, to make sure your layout will be responsive and easy on the eyes.
Frequently Asked Questions (FAQ)
1. Can we add two logos in the header in Squarespace 7.1 without a plugin?
Yes, people, this is a post about how to manually enter a second logo using some custom JavaScript and CSS — no third-party plugins needed.
2. Where should I upload the second logo?
You should upload your second logo via Settings → Files in your Squarespace dashboard. Once uploaded, copy the file URL to use it in your code injection.
3. Will this affect my primary logo or site title?
No. The code adds a second logo next to your existing one without altering your primary logo setup.
4. How can I place one logo on the left and the second logo on the right side of the header?
You can use this CSS to separate them across the header:
.header-title-nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
This uses Flexbox to space the two logos apart responsively.
5. Can I make the second logo link to another website or internal page?
Yes. Wrap the second logo in an <a> tag like this:
var link = document.createElement("a");
link.href = "https://yourlink.com";
link.appendChild(secondLogo);
headerInner.appendChild(link);
Just replace the URL with your destination link.
6. Will the second logo be responsive on mobile?
Yes. The blog provides mobile-specific CSS:
@media screen and (max-width: 767px) {
.second-logo {
max-height: 30px;
margin-left: 10px;
}
}
You can adjust sizes and margins as needed.
7. What size should my second logo be?
One suggested max height is 40px on desktop and 30px on mobile. But you can customize this in the CSS according to your site design.
8. Is it safe to use Code Injection for this?
Yes, you can inject code for customizations like this in Squarespace. Just make sure you are testing your site on desktop, tablet, and mobile after you put things in place.
9. Can I remove the second logo later if needed?
Absolutely. Simply remove the JavaScript snippet in Settings → Advanced → Code Injection and the corresponding CSS in Pages → Custom Code → Custom CSS
