leilollipop Posted July 22, 2023 Share Posted July 22, 2023 (edited) My svg logo is currently (red and white with white text) on the homepage. I would like the logo to change to (red and black with black text) on other pages. How can I achieve this? Edited July 22, 2023 by leilollipop Link to comment
inside_the_square Posted July 22, 2023 Share Posted July 22, 2023 Hey @leilollipop I don't have a quick fix for an SVG but I do have an older tutorial that can show you how to use a unique logo on an individual page; hope it helps! Marybeth365 1 🤓 Creator of InsideTheSquare.co ✨ SQUARESPACE CIRCLE LEADER✨ SQUARESPACE EXPERT ✨ SQUARESPACE EMPLOYEE EDUCATOR ✨ CERTIFIED CUSTOM CODE EXPERT ✨ 🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap 🙋♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn ⭐️ Ready to go pro? Get my custom code collection: insidethesquare.co/css Link to comment
leilollipop Posted July 22, 2023 Author Share Posted July 22, 2023 Hey @inside_the_square this was very helpful, but how do I reflect this change on the mobile version? Link to comment
Solution tuanphan Posted July 24, 2023 Solution Share Posted July 24, 2023 On 7/23/2023 at 4:50 AM, leilollipop said: Hthis was very helpful, but how do I reflect this change on the mobile version? Use this code instead <style> header#header img { content: url(paste new logo image url here); } </style> inside_the_square 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
leilollipop Posted July 31, 2023 Author Share Posted July 31, 2023 Hello, we managed to get a white logo for the homepage, but when I click on the hamburger icon on mobile, it appears white instead of black on the menu overlay. All other pages have a black logo. How can I change the color of the icon to black on the menu overlay? but keep it white on the homepage Link to comment
tuanphan Posted August 2, 2023 Share Posted August 2, 2023 On 8/1/2023 at 5:16 AM, leilollipop said: Hello, we managed to get a white logo for the homepage, but when I click on the hamburger icon on mobile, it appears white instead of black on the menu overlay. All other pages have a black logo. How can I change the color of the icon to black on the menu overlay? but keep it white on the homepage What is your site url? We can check easier 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
leilollipop Posted August 4, 2023 Author Share Posted August 4, 2023 @tuanphan here is the site: corecompassing.squarespace.com Thank you so much for all your help! Link to comment
tuanphan Posted August 4, 2023 Share Posted August 4, 2023 9 hours ago, leilollipop said: @tuanphan here is the site: corecompassing.squarespace.com Thank you so much for all your help! Change this code <style> header#header img { content: url(https://static1.squarespace.com/static/64ade351acf63e69c39ea855/t/64bdef3b011e0221bc1f8632/1690932009584/Logo.svg.png); } </style> to this <style> body:not(.header--menu-open) header#header img { content: url(https://static1.squarespace.com/static/64ade351acf63e69c39ea855/t/64bdef3b011e0221bc1f8632/1690932009584/Logo.svg.png); } </style> leilollipop 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
leilollipop Posted August 4, 2023 Author Share Posted August 4, 2023 This worked! You are amazing! I really appreciate all your help. @tuanphan tuanphan 1 Link to comment
howtodiehappy Posted August 25, 2023 Share Posted August 25, 2023 Okay, so this is a super-helpful thread, and using the code, I managed to insert an alternative black logo onto the other pages (without images). The problem I have now is the the custom CSS logos are not the same size as the original white png, because I adjusted the logo heights. How do I account for this adjustment in the CSS?🙏🏾💚🌈 Logo Height Mobile Logo Max Height Link to comment
tuanphan Posted August 27, 2023 Share Posted August 27, 2023 On 8/25/2023 at 9:40 PM, howtodiehappy said: Okay, so this is a super-helpful thread, and using the code, I managed to insert an alternative black logo onto the other pages (without images). The problem I have now is the the custom CSS logos are not the same size as the original white png, because I adjusted the logo heights. How do I account for this adjustment in the CSS?🙏🏾💚🌈 Logo Height Mobile Logo Max Height Can you share link to page where you have problem? 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
howtodiehappy Posted August 29, 2023 Share Posted August 29, 2023 I'd love to, but the site isn't live yet. The issue is that I've used SS's standard image sizing tool in the main header (as per the screengrab), so (obviously) when I add the same image into the CSS, it's smaller (the original size). Options as I see them are: Add the image size to the CSS; Insert a larger image into the CSS. The question is: is option 1 a possibility?🙏🏾 Link to comment
tuanphan Posted September 2, 2023 Share Posted September 2, 2023 On 8/29/2023 at 11:41 AM, howtodiehappy said: I'd love to, but the site isn't live yet. The issue is that I've used SS's standard image sizing tool in the main header (as per the screengrab), so (obviously) when I add the same image into the CSS, it's smaller (the original size). Options as I see them are: Add the image size to the CSS; Insert a larger image into the CSS. The question is: is option 1 a possibility?🙏🏾 You can follow this to share url 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
sofia_fischer Posted September 3, 2023 Share Posted September 3, 2023 Can this be done any other way without having a premium account? I can't post any personalized CSS into single pages... Link to comment
tuanphan Posted September 4, 2023 Share Posted September 4, 2023 20 hours ago, sofia_fischer said: Can this be done any other way without having a premium account? I can't post any personalized CSS into single pages... Yes. Possible. You can edit page > Add a Code Block (any where on page) > Paste code. Code Block and Page Header are similar and Personal/Basic Plan supports Code Block 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
sofia_fischer Posted September 4, 2023 Share Posted September 4, 2023 Thank you so much!! For solving this and for the great tip 🙂 tuanphan 1 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