Change mobile logo when menu is open

Site URL: https://star-seal-m7mk.squarespace.com/

Link: https://star-seal-m7mk.squarespace.com/

Password: emma

Hi! I'm looking to change the logo for the mobile version of the site when the navigation menu is open.

Here's the css code I tried but not working:

.header--menu-open {
  .header-title-logo img {
    visibility: hidden !important;
  }

  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

Any help is appreciated, thank you!

16 hours ago, JCB said:

Site URL: https://star-seal-m7mk.squarespace.com/

Link: https://star-seal-m7mk.squarespace.com/

Password: emma

 

Hi! I'm looking to change the logo for the mobile version of the site when the navigation menu is open.

Here's the css code I tried but not working:

.header--menu-open {
  .header-title-logo img {
    visibility: hidden !important;
  }

  .header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

 

Any help is appreciated, thank you!

Try adding to Home > Design > Custom Css

.header--menu-open  .header-mobile-logo img {
	visibility: hidden;
}

.header--menu-open  .header-mobile-logo:after {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url('https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png') !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	visibility: visible;
	position: absolute;
	left: 0;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

5 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.header--menu-open  .header-mobile-logo img {
	visibility: hidden;
}

.header--menu-open  .header-mobile-logo:after {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url('https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png') !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	visibility: visible;
	position: absolute;
	left: 0;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

It worked, thank you!

@JCB on mobile overlay menu, users need to scroll to see the button. You can move it up a bit with this CSS, it will be better

/* Mobile overlay menu button */
@media screen and (max-width:767px) {
.header-menu-cta {
    position: relative;
    top: -200px;
}
}

You can adjust -200 value

Hi, I am trying to achieve a similar result on my website, but the code you provided does not work for me.

I already have a different logo on my homepage (for desktop and mobile), but would like to set a third all-white logo whenever my mobile menu is opened. What am I missing here?

/**replace logo in mobile menu**/
.header—menu-open  .header-mobile-logo img {
	visibility: hidden !important;
}

.header—menu-open  .header-mobile-logo:after {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url('https://static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63333d57b35dd064286fbcee/1664302423701/logo-tr-final-white.png') !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	visibility: visible;
	position: absolute;
	left: 0;
}

/**replace logo on homepage desktop**/
@media screen and (min-width:767px) {
#collection-6331b66e66d8af27cebe0f08 .header-title-logo img {
content: url(//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png) !important;
max-height:inherit !important;

  }
}

/**replace logo on homepage mobile**/
@media screen and (max-width:767px) {
#collection-6331b66e66d8af27cebe0f08 .header-display-mobile .header-title-logo img {
content: url("//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png") !important;
max-height:inherit !important;

  }
}

www.timraudies.com

Thanks!

On 9/28/2022 at 4:42 AM, TimRaudies said:

Hi, I am trying to achieve a similar result on my website, but the code you provided does not work for me.

I already have a different logo on my homepage (for desktop and mobile), but would like to set a third all-white logo whenever my mobile menu is opened. What am I missing here?

/**replace logo in mobile menu**/
.header—menu-open  .header-mobile-logo img {
	visibility: hidden !important;
}

.header—menu-open  .header-mobile-logo:after {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url('https://static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63333d57b35dd064286fbcee/1664302423701/logo-tr-final-white.png') !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	visibility: visible;
	position: absolute;
	left: 0;
}

/**replace logo on homepage desktop**/
@media screen and (min-width:767px) {
#collection-6331b66e66d8af27cebe0f08 .header-title-logo img {
content: url(//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png) !important;
max-height:inherit !important;

  }
}

/**replace logo on homepage mobile**/
@media screen and (max-width:767px) {
#collection-6331b66e66d8af27cebe0f08 .header-display-mobile .header-title-logo img {
content: url("//static1.squarespace.com/static/61f81bdfc5909b6ad3e084ce/t/63332b44e77981111958151c/1664297798409/logo-tr-final-inverted-xl.png") !important;
max-height:inherit !important;

  }
}

www.timraudies.com

 

Thanks!

Hi,

For homepage only or all pages?

Hi, all!

Similar question here that never got answered — I have code applied already so that the logo changes out on certain pages on *desktop,* which seems to be working fine. BUT, I'm now looking to make sure that the logo for all pages, when a user opens navigation in mobile, is the white/teal/white version instead of the black/teal/black version that's appearing now, since it makes the black portions disappear on the black background.

Here's my site.

Any help would be so appreciated, thank you!

On 10/10/2022 at 9:59 PM, brandi_sqspace said:

Hi, all!

Similar question here that never got answered — I have code applied already so that the logo changes out on certain pages on *desktop,* which seems to be working fine. BUT, I'm now looking to make sure that the logo for all pages, when a user opens navigation in mobile, is the white/teal/white version instead of the black/teal/black version that's appearing now, since it makes the black portions disappear on the black background.

Here's my site.

Any help would be so appreciated, thank you!

Use this code

https://forum.squarespace.com/topic/167046-invert-site-logo-on-specific-pages/?do=findComment&comment=578654