Replace Site Title on a Specific Page
Replace your site title on a specific page to highlight a different brand or membership area.
Steps
Step 1: Add the javascript
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 Title - from Will-Myers.com -->
<script>
window.addEventListener('DOMContentLoaded', () => {
const newDesktopTitle = "Woof Woof"; // New Site Title
const newMobileTitle = ""; //
const newHref = "/";
const desktopSiteTitle = document.querySelector('.header-display-desktop #site-title');
const mobileSiteTitle = document.querySelector('.header-display-mobile #site-title')
//desktop
desktopSiteTitle.href = newHref
desktopSiteTitle.innerHTML = newDesktopTitle
//mobile
mobileSiteTitle.href = newHref
mobileSiteTitle.innerHTML = newMobileTitle
})
</script>
Step 3: Add your new logo
Replace the newDesktopTitle and newMobileTitle variables with the urls of your new logo. They can be the same if you want.
Adjust the newHref variable if you’d like it to be different, otherwise, leave it as is.
Follow the same steps above, but paste the javascript in your Blog Settings » Advanced » Blog Post Item Code Injection area
Follow the same steps above, but paste the javascript in your Blog Settings » Advanced » Page Header Code Injection area
Et voila! We now have have replaced Site Logos.
Replace the your site nav on specific pages of your website. Great for use with Member Areas, multi-lingual sites, and additional brands under the same URL.
