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. Make sure to quote me or tag me in your reply, otherwise I won't be notified. www.sevenstars.studio www.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 dnmddy and tuanphan 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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. Make sure to quote me or tag me in your reply, otherwise I won't be notified. www.sevenstars.studio www.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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KaylaKing Posted August 27, 2023 Share Posted August 27, 2023 (edited) On 12/12/2021 at 4:22 AM, Beyondspace 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 Hi, I've used this code and it worked great! One issue for me though- clicking the logo while the mobile menu is open no longer redirects to the home page. I am working on this website for a company so unfortunately I can't share any login info, any possible fixes? Edited August 27, 2023 by KaylaKing forgot words Link to comment
tuanphan Posted August 30, 2023 Share Posted August 30, 2023 On 8/28/2023 at 6:24 AM, KaylaKing said: Hi, I've used this code and it worked great! One issue for me though- clicking the logo while the mobile menu is open no longer redirects to the home page. I am working on this website for a company so unfortunately I can't share any login info, any possible fixes? Use this new code instead .header--menu-open header#header img{ content: url('https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png') !important; } Reference Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KaylaKing Posted August 31, 2023 Share Posted August 31, 2023 On 8/29/2023 at 9:52 PM, tuanphan said: Use this new code instead .header--menu-open header#header img{ content: url('https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png') !important; } Reference That worked, thank you so much!! 🙂 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