Replace Site Logo on a Specific Page
Replace your site logo on a specific page to highlight a different brand or membership area.
Why Use This?
Use this tutorial to switch out the logo (and it’s corresponding url) with a completely different logo. If you just want to change the logo variant so that it shows up better against the background color, check out this tutorial.
Steps
Step 1: Import your new logo
In your Custom CSS area, navigate to the Custom Files dropdown and upload your new logo.
Step 2. Set your logo variant as a variable
Add your new logo to a variable in your Custom CSS area that we can then pull into specific pages. Paste the below code into your Custom CSS area, replacing the url in single quotes with the url of your new logo.
/**
* Logo Variations
**/
html {
--light-logo: url('https://static1.squarespace.com/static/65317d8e655a6734ccfb9e58/t/65b29b71ab0ad84dc5d58bf7/1706204017728/Light+Logo.png');
}
Step 3: Pull in your logo variable to specific pages
Navigate to the Website area in the Squarespace Editor and click on the settings (gear icon) of the page you want to replace your logo. In the Page Settings » Advanced » Page Header Code Injection area, paste the below code.
<!-- Replace Site Logo - from Will-Myers.com -->
<style>
#header .header-mobile-logo img,
#header .header-title-logo img{
content: var(--light-logo);
}
</style>
Step 4. Change where the logo points
Below the code from step 3, paste in the following javascript and replace /new-home with the new url you’d like the logo to point to.
<script>
window.addEventListener('DOMContentLoaded', () => {
const newHref = "/new-home";
const desktopSiteLogo = document.querySelector('#header .header-display-desktop .header-title-logo a');
const mobileSiteLogo = document.querySelector('#header .header-display-mobile .header-title-logo a')
desktopSiteLogo.href = newHref
mobileSiteLogo.href = newHref
})
</script>
Related Code Snippets
The below Code Snippets are available to Code Curious members.