How to show a different desktop and mobile menu logo - Squarespace 7.1

You might want to have one logo shown on desktop and a different one shown when the mobile menu is open.

If you want to make this for one specific page only, then instead of adding the code to the site wide ‘Custom CSS’ then add it instead to the Page > Settings - Advanced Code Injection. If you are using this method the

---

Site Wide

Add this version to Custom CSS

/* Insert Logo A when the desktop menu is open */
div.header-title-logo a {
content:url("INSERT_IMG_LINK");
max-width: 300px;
margin-left: auto;
margin-right: auto;
}

/* Hide Logo A when the mobile menu is open */
.header--menu-open .header-title-logo a {
content: none;
}

/* Insert Logo B (as a background image) when the mobile menu is open */
.header--menu-open .header-title-logo a {
background-image: url(INSERT_IMG_LINK);
background-size: cover;
background-repeat: no-repeat;
}

---

Page Specific

Add this version to Page > Settings (Cog Icon) > Advanced > Page Code Injection

<style>
/* Insert Logo A when the desktop menu is open */
div.header-title-logo a {
content:url("INSERT_IMG_LINK");
max-width: 300px;
margin-left: auto;
margin-right: auto;
}

/* Hide Logo A when the mobile menu is open */
.header--menu-open .header-title-logo a {
content: none;
}

/* Insert Logo B (as a background image) when the mobile menu is open */
.header--menu-open .header-title-logo a {
background-image: url(INSERT_IMG_LINK);
background-size: cover;
background-repeat: no-repeat;
}
</style>