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
-
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.
-
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.
-
No. The code adds a second logo next to your existing one without altering your primary logo setup.
-
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.
-
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.
