Guest Posted October 21, 2022 Share Posted October 21, 2022 Hi, I am using the code below to change the logo on the home page, however, the code effects the entire page so when i click the hamburger menu, the logo is white. I do not want that because it is not very visible. I want the logo to be white on the homepage but change back to black when you click on the hamburger menu like it does on the other pages. How can I do that? https://tlcdesign-sylvie.squarespace.com/home password: sylvie <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/634facca9a1aa046ad910a6c/t/635193f56754c829ac99d578/1666290677453/172DB8AD-65EF-4986-BCF0-AEE53CCF6716.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> Link to comment
Beyondspace Posted October 22, 2022 Share Posted October 22, 2022 4 hours ago, TLCDesign said: Hi, I am using the code below to change the logo on the home page, however, the code effects the entire page so when i click the hamburger menu, the logo is white. I do not want that because it is not very visible. I want the logo to be white on the homepage but change back to black when you click on the hamburger menu like it does on the other pages. How can I do that? https://tlcdesign-sylvie.squarespace.com/home password: sylvie <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/634facca9a1aa046ad910a6c/t/635193f56754c829ac99d578/1666290677453/172DB8AD-65EF-4986-BCF0-AEE53CCF6716.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> Try adding to Home > Design > Custom Css /*invert logo color when open hamburger*/ .header--menu-open .header-display-mobile .header-title-logo a { -webkit-filter: invert(1); filter: invert(1); } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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 October 22, 2022 Share Posted October 22, 2022 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Guest Posted October 22, 2022 Share Posted October 22, 2022 (edited) 10 hours ago, bangank36 said: My testing Hi there, Thanks for the code but that isn’t quite what I’m looking for, I don’t want it to be inverted because that also effects the colour of the logo (the red lips become green) I just want the white logo on the home page to stay white but then change back to the normal black logo when pressing the hamburger menu. Would that be possible? The following picture is how I want the logo to look on the hamburger on the entire site. It currently works on all the other pages apart from the home page because I uploaded it on the site but then used a code to insert a new logo (the white version) for just the home page. But the issue is in doing so is that it applies to the whole page thus also changing the hamburger menu on the homepage to be the uploaded white version, which I don’t want. I want it to change back to the black version Sorry I hope that makes sense Edited October 22, 2022 by TLCDesign Link to comment
Guest Posted October 26, 2022 Share Posted October 26, 2022 (edited) @tuanphan hey, would you be able to help with this problem?? Edited October 26, 2022 by TLCDesign Link to comment
tuanphan Posted October 31, 2022 Share Posted October 31, 2022 On 10/26/2022 at 8:36 PM, TLCDesign said: @tuanphan hey, would you be able to help with this problem?? Add this to Design > Custom CSS body.header--menu-open .header-title-logo a { background-image: none !important; } body.header--menu-open .header-title-logo img { visibility: visible !important; } 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
Guest Posted November 12, 2022 Share Posted November 12, 2022 On 10/31/2022 at 9:30 AM, tuanphan said: Add this to Design > Custom CSS body.header--menu-open .header-title-logo a { background-image: none !important; } body.header--menu-open .header-title-logo img { visibility: visible !important; } It 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