How to Add a Different Logo on a Single Squarespace 7.1 Page!
One of our favourite Squarespace 7.1 features is being able to customize colors between pages and sections. While we are able to update logo colors between different pages “if” we are used a text based logo directly in Squarespace, we are limited if we decide to upload our own custom logo. You may have struggled with finding a colored logo that works across the board or switching up header photos, but we’ve got a great solution for you. With just a little code, we can show a different logo depending on what works best for your pages.
In this blog post, we’re going to teach you how to easily change your uploaded logo between different pages for Squarespace 7.1!
LOOKING FOR SQUARESPACE 7.0? SCROLL TO THE BOTTOM!
OPTION A
Step 1. ADDING YOUR LOGO (TEXT BASED)
Let’s quickly show you how easy it is to change colors if you are using a text based logo in Squarespace 7.1 between pages (we’ll be using our NASHVILLE template). Below, you’ll see that Squarespace 7.1 has different color themes to decide what works best for each page.
Under EDIT HEADER -> STYLE, we’ve chosen the DYNAMIC option for the first section to show behind the logo and navigation.
On a different page, we’ve chosen a much darker photo, so our dark logo and navigation won’t show up. Let’s jump into the first section’s settings and under COLOR, choose a different THEME. Voila!
OPTION B
Step 1. ADDING YOUR LOGO (IMAGE BASED)
If you are uploading an image-based logo, you’ll be limited to one color without a bit of custom code. Whether you are using CANVA or PHOTOSHOP, you’ll want to make sure you have a darker and lighter logo option prepared to the same dimensions and size. (We recommend about 600px wide as a transparent PNG).
From there, let’s first upload your logo through EDIT SITE HEADER and SAVE.
PRO TIP: We recommend uploading the darker version of your logo, as this will be the standard for blog posts, shop items, etc, which will likely use a light header, but we have a suggestion in step 4!
Step 2. ADD CODE TO PAGE HEADER
For the pages you’d like to add a different logo, let’s copy the code below and under the settings of that page (GEAR ICON) go to ADVANCED and paste. We’ll have to update a bit of code in the next step, so it won’t change quite yet!
NOTE: with any custom code, you’ll need at least a business payment plan.
<style>
div.header-title-logo a {
content:url("NEW LOGO URL") !important;
max-width: 300px;
}
</style>Step 3. UPLOAD SECONDARY LOGO
Let’s jump into DESIGN -> CUSTOM CSS and scroll down to MANAGE CUSTOM FILES. From there, upload your secondary logo and click the uploaded file. The URL will then pop up, so you’ll want to make sure you CUT the whole URL (be aware if you have other CSS there). Make sure that URL is deleted before you leave, but you can simply click CANCEL.
Then, head back into the ADVANCED SETTINGS of your page and replace NEW LOGO URL with that URL (keeping the quotation marks in place). Click SAVE.
NOTE: You may notice the logo sizes are different between pages, so in the code you just added, you may want to adjust the MAX-WIDTH settings until they match up!
Step 4. BLOG AND SHOP COLLECTIONS
You can now copy and paste this code between different pages, and if you decide to add it to a collection (like a blog or shop page), it will update for all of the inner posts as well, so keep that in mind!
Step 5: UPDATING LOGO FOR MOBILE
Doing these steps, you may notice that logo for your mobile menu may not match, so here’s a bit of code to add in.
We’ll copy it into our our CUSTOM CSS and update our NEW LOGO URL to the option that works best. No quotation marks to worry about, and make sure to SAVE and be aware of your other code.
Under the WEBSITE tab, scroll all the way to the bottom > WEBSITE TOOLS > CUSTOM CSS. You can also use the search function and type “custom css” or “css”. Here’s more info on customizing css.
// mobile menu ///* hide current image */body.header--menu-open .header-title-logo img { visibility: hidden;} /* set new image on burger menu click */ body.header--menu-open .header-title-logo a { background-image: url(NEW LOGO URL); background-size: cover; background-repeat: no-repeat;}Looking for Squarespace 7.0?
FOLLOW ALONG OPTION B STEPS, but you will have different code for STEP 2.
(ADD THIS UNDER THE INDEX PAGE -> SETTINGS -> ADVANCED)
<style> .Header-branding { display: block; max-width: 100%; max-height: 124px; content: url("NEW LOGO URL") !important; margin-left: auto; margin-right: auto; } </style>FOR STEP 5 (MOBILE MENU) squarespace 7.0 uses a different style of mobile menu, you are limited to only one color!
EXTRA STEP:
You may need to go under DESIGN -> SITE STYLES under SITE:LOADING, uncheck to disable AJAX LOADING.
Overall, we want to make sure your branding works across your entire website and we hope this code will help!
Looking to learn more on getting your website ready to go?
Our Squarespace website templates may be the right fit for you! Our DIY option allows you to play and plug your content and get you launched pronto!
