Jump to content

Change mobile logo when menu is open

Recommended Posts

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!

Please give this a 👍 if it helps

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.png.09d8a4fe7d58b0f515cb87990b3af1cd.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!

Please give this a 👍 if it helps

Link to comment

@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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...

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**/
.headermenu-open  .header-mobile-logo img {
	visibility: hidden !important;
}

.headermenu-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!

Edited by TimRaudies
Link to comment
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**/
.headermenu-open  .header-mobile-logo img {
	visibility: hidden !important;
}

.headermenu-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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.