Jia Posted December 11, 2021 Share Posted December 11, 2021 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 www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
Beyondspace Posted December 12, 2021 Share Posted December 12, 2021 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 tuanphan and dnmddy 2 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 pluginIf 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
Beyondspace Posted December 12, 2021 Share Posted December 12, 2021 My testing result 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 pluginIf 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
Jia Posted December 12, 2021 Author Share Posted December 12, 2021 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 www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
tuanphan Posted December 14, 2021 Share Posted December 14, 2021 @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
TimRaudies Posted September 27, 2022 Share Posted September 27, 2022 (edited) 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! Edited September 27, 2022 by TimRaudies Link to comment
tuanphan Posted September 30, 2022 Share Posted September 30, 2022 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? 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
brandi_sqspace Posted October 10, 2022 Share Posted October 10, 2022 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
tuanphan Posted October 12, 2022 Share Posted October 12, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment