hollykmsmith Posted August 1, 2023 Share Posted August 1, 2023 I'm using a dynamic menu, which works for most of my pages, but with a couple of my pages (FAQs and Services), the first section is the same colour as my logo. I have managed to implement CSS to switch out the logo to a different colour for the affected pages. It works well, apart from with the hamburger menu on mobile. I have followed the instructions to replace the hamburger logo for affected pages, but it doesn't seem to be hiding the original logo properly, so I get two logos overlapping, giving a funny outline. Can someone help me by taking a look at the code and see what's going on? Code has been implemented in the "Advanced" section of the specific page, and not the site-wide CSS panel. Website: https://aspiring-dental.squarespace.com Password: Aspiring-Dental-2023 <style> div.header-title-logo a { content:url("https://static1.squarespace.com/static/64ae1056de93ab723f53c4f3/t/64c8726fe5dffc761d47c949/1690858095063/AspiringDental_Logo_RGB_Blue.png") !important; max-width: 300px; } // mobile menu // /* hide current image */ body.header--menu-open .header-title-logo img { visibility: hidden; } /* set new image on burger menu click */ body.header--menu-open .header-title-logo a { background-image: url(https://static1.squarespace.com/static/64ae1056de93ab723f53c4f3/t/64c877652a73de35bf04a12a/1690859365906/AspiringDental_Logo_RGB_Cream.png); background-size: cover; background-repeat: no-repeat; } </style> Link to comment
hollykmsmith Posted August 1, 2023 Author Share Posted August 1, 2023 These are the original instructions I followed. Everything works, apart from Step 5 https://www.thecoastkit.com/blog/how-to-update-logo-on-different-pages Link to comment
Solution tuanphan Posted August 3, 2023 Solution Share Posted August 3, 2023 To replace Logo, use this new shorter code <style> body:not(.header--menu-open) header#header img { content:url(https://static1.squarespace.com/static/64ae1056de93ab723f53c4f3/t/64c8726fe5dffc761d47c949/1690858095063/AspiringDental_Logo_RGB_Blue.png) !important;} body.header--menu-open header#header img { content: url(https://static1.squarespace.com/static/64ae1056de93ab723f53c4f3/t/64c877652a73de35bf04a12a/1690859365906/AspiringDental_Logo_RGB_Cream.png);} </style> 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
hollykmsmith Posted August 3, 2023 Author Share Posted August 3, 2023 That worked perfectly. Thank you!! Really appreciate your help. tuanphan 1 Link to comment
LK89 Posted February 24 Share Posted February 24 Hi, I am using the code you provided, and it works great. However it's to big on mobile. How can I set the height/size I want on mobile? (The logo inside the hamburger menu is correct) <style> body:not(.header--menu-open) div.header-title-logo a { content:url("https://static1.squarespace.com/static/658352163290836ffdcab59a/t/65d8b1cc1d63ae7ef1d45d2a/1708700108553/Storywell+hvit.png/") !important; max-height: 60px; } </style> Link to comment
tuanphan Posted February 26 Share Posted February 26 On 2/25/2024 at 12:55 AM, LK89 said: Hi, I am using the code you provided, and it works great. However it's to big on mobile. How can I set the height/size I want on mobile? (The logo inside the hamburger menu is correct) <style> body:not(.header--menu-open) div.header-title-logo a { content:url("https://static1.squarespace.com/static/658352163290836ffdcab59a/t/65d8b1cc1d63ae7ef1d45d2a/1708700108553/Storywell+hvit.png/") !important; max-height: 60px; } </style> Use this new code instead <style> body:not(.header--menu-open) header#header img { content:url("https://static1.squarespace.com/static/658352163290836ffdcab59a/t/65d8b1cc1d63ae7ef1d45d2a/1708700108553/Storywell+hvit.png/") !important; } </style> LK89 1 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
LK89 Posted February 26 Share Posted February 26 Hi again, Encountered a slight bug while using the code. I use Weglot for translating, and now instead of the flags, it shows the logo. Is there a way to fix this? Link to comment
tuanphan Posted February 27 Share Posted February 27 On 2/27/2024 at 2:36 AM, LK89 said: Hi again, Encountered a slight bug while using the code. I use Weglot for translating, and now instead of the flags, it shows the logo. Is there a way to fix this? Use this new code <style> body:not(.header--menu-open) header#header img:not(.flag) { content:url("https://static1.squarespace.com/static/658352163290836ffdcab59a/t/65d8b1cc1d63ae7ef1d45d2a/1708700108553/Storywell+hvit.png/") !important; } </style> 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment