paulzforeman Posted September 25, 2019 Share Posted September 25, 2019 (edited) Many versions of this question have been asked, but I'm a small business owner brand-new to Squarespace, I'm using 7.1, and so far none of the CSS solutions from previous versions of Squarspace seem to be working for me. I want to change the logo for individual pages - on my home page, I want my logo in its normal full-color form. For the rest of the pages, I want it to be all in white (this is to keep it visible against the backgrounds I'm giving it). I have the two separate versions of the logo (color and white). The color logo is currently on all of my pages, and the white logo is uploaded in my custom files. Is there a bit of CSS code that I can use to replace the logo in the header on any one page? Again, there are lots of answers to this already, but none are working, and I suspect it's because I am using 7.1. The answers all seem to be template-specific, but as far as I can tell, all of the templates are similar in 7.1, and I can't change my template to try different ones (??) Sorry if my question was confusing. Thank you! Edited September 25, 2019 by paulzforeman Initial Revision Link to comment
annakid Posted January 8, 2020 Share Posted January 8, 2020 Hi Paul, I'm having the same problem and wondered if you found a solution? Link to comment
tuanphan Posted January 9, 2020 Share Posted January 9, 2020 I answered for some members this month. If you search "replace logo", "change logo" you will see some questions with answer. Also, you can share link to your site here, I can take a look. 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
annakid Posted January 10, 2020 Share Posted January 10, 2020 Thanks I think I've worked it out! Link to comment
hotslicedesign Posted January 15, 2020 Share Posted January 15, 2020 https://www.squarestylist.com/shop/change-logo-one-page?fbclid=IwAR2vuB712BLdC-ZomX4V-4q4PVimvwZOHilscS8DhCcVxf8-v99rTbw4nl0 This free tutorial worked perfect for me changing my logo on certain pages on the 7.1 version of squarespace 🙂 ldxx, ACScruggs and RossCH 1 2 Link to comment
CallieR Posted March 18, 2021 Share Posted March 18, 2021 I have tried 3 different things that worked for other people in their 7.1 versions, but I cannot seem to get any of them to work... I am trying to change the logo on the white minimal, white bold, light minimal, and light bold color variations. I have uploaded a 'secondary' version of my logo that has a teal 'GO' instead of it being beige. I have the code for this at the very top of my CSS panel. I am probably doing something very silly that's not allowing this work... would someone mind taking a look for me? Please and thank you!!!!!!! https://elk-reed-69st.squarespace.com/ Username: callie.r.roberson@gmail.com Link to comment
tuanphan Posted March 22, 2021 Share Posted March 22, 2021 On 3/18/2021 at 10:13 PM, CallieR said: I have tried 3 different things that worked for other people in their 7.1 versions, but I cannot seem to get any of them to work... I am trying to change the logo on the white minimal, white bold, light minimal, and light bold color variations. I have uploaded a 'secondary' version of my logo that has a teal 'GO' instead of it being beige. I have the code for this at the very top of my CSS panel. I am probably doing something very silly that's not allowing this work... would someone mind taking a look for me? Please and thank you!!!!!!! https://elk-reed-69st.squarespace.com/ Username: callie.r.roberson@gmail.com Add to Page Header (page where you want to change logo) <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> CallieR, ddchan and artpimpress 1 2 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
CallieR Posted March 22, 2021 Share Posted March 22, 2021 You are INCREDIBLE. That did the trick. Thank you SO MUCH! Link to comment
mark6 Posted March 22, 2021 Share Posted March 22, 2021 Tuanphan – they code you recommended for changing out the logo on specific pages works. However, it's messing with the colors I've assigned to different sections on the page. Any recommendations on how to fix this? Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/23/2021 at 2:00 AM, mark6 said: Tuanphan – they code you recommended for changing out the logo on specific pages works. However, it's messing with the colors I've assigned to different sections on the page. Any recommendations on how to fix this? Can you share page 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 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
artpimpress Posted May 26, 2021 Share Posted May 26, 2021 I am looking for the same solution and tried the code above. The logo keeps getting cut off and the navigation disappears. I have tried multiple times to reduce the size of the logo I upload but it doesn't make a difference. I do also have code to force the navigation to mobile so perhaps that is the conflict. If anyone has a solution, I would be grateful. This is the page https://verus-advisory.squarespace.com/thought-leadership Link to comment
tuanphan Posted May 28, 2021 Share Posted May 28, 2021 On 5/27/2021 at 1:42 AM, artpimpress said: I am looking for the same solution and tried the code above. The logo keeps getting cut off and the navigation disappears. I have tried multiple times to reduce the size of the logo I upload but it doesn't make a difference. I do also have code to force the navigation to mobile so perhaps that is the conflict. If anyone has a solution, I would be grateful. This is the page https://verus-advisory.squarespace.com/thought-leadership change to Quote background-size: contain; artpimpress 1 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
artpimpress Posted May 28, 2021 Share Posted May 28, 2021 9 hours ago, tuanphan said: change to Thank you! That worked perfectly. I am so grateful. Link to comment
richardgreencreative Posted September 9, 2021 Share Posted September 9, 2021 Is there also a way to resize the image container when replacing the logo so that proportionally it can match any other nav logos cross-site? Thanks Link to comment
tuanphan Posted September 12, 2021 Share Posted September 12, 2021 On 9/9/2021 at 6:45 PM, richardgreencreative said: Is there also a way to resize the image container when replacing the logo so that proportionally it can match any other nav logos cross-site? Thanks Hi, What is your site url? 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
richardgreencreative Posted September 13, 2021 Share Posted September 13, 2021 Morning @tuanphan URL: www.richardgreencreative.com/wedding-films I have already replaced the logo but it's proportionally smaller than my other logo across the remainder of the site. Thanks Link to comment
tuanphan Posted September 15, 2021 Share Posted September 15, 2021 On 9/13/2021 at 5:47 PM, richardgreencreative said: Morning @tuanphan URL: www.richardgreencreative.com/wedding-films I have already replaced the logo but it's proportionally smaller than my other logo across the remainder of the site. Thanks you can change background-size: contain; to background-size: 100px; adjust number 100 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
jetztpat Posted December 16, 2021 Share Posted December 16, 2021 Hello, We're having the same issue (www.jetztpat.com) as the original asker of this post. None of the HTML options provided have quite worked... @tuanphanI used the bit of code you provided in the page headers, but now the logo is layered on certain pages (see screenshots). I just searched through the pages again, and now can't see the code bit I had previously entered (above) anywhere, which is.... odd? Any help is greatly appreciated!! Link to comment
tuanphan Posted December 19, 2021 Share Posted December 19, 2021 On 12/16/2021 at 6:19 PM, jetztpat said: Hello, We're having the same issue (www.jetztpat.com) as the original asker of this post. None of the HTML options provided have quite worked... @tuanphanI used the bit of code you provided in the page headers, but now the logo is layered on certain pages (see screenshots). I just searched through the pages again, and now can't see the code bit I had previously entered (above) anywhere, which is.... odd? Any help is greatly appreciated!! To change logo on blog page to Black, don't remove any code in your current code Add this to Design > Custom CSS body[class*="collection-type-blog"] header#header img { filter: invert(1) !important; -webkit-filter: invert(1); } 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
yadiyadaErik Posted April 27, 2022 Share Posted April 27, 2022 @tuanphan You still here? I would love some help. Your snippet of code <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> Works perfectly for me. But it does not show on mobile! What should I do?https://www.hexaplanter.com/ Link to comment
tuanphan Posted April 30, 2022 Share Posted April 30, 2022 On 4/27/2022 at 6:02 PM, yadiyadaErik said: @tuanphan You still here? I would love some help. Your snippet of code <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> Works perfectly for me. But it does not show on mobile! What should I do?https://www.hexaplanter.com/ Use this new code <style> header#header img { content: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png); } </style> 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
maxbrewer Posted June 5, 2022 Share Posted June 5, 2022 On 12/19/2021 at 6:36 PM, tuanphan said: To change logo on blog page to Black, don't remove any code in your current code Add this to Design > Custom CSS body[class*="collection-type-blog"] header#header img { filter: invert(1) !important; -webkit-filter: invert(1); } Is it possible to instead use CSS like this to point to a different image (rather than a straight 'invert'). My colour palette uses a very dark brown on white (rather than pure black) Link to comment
tuanphan Posted June 10, 2022 Share Posted June 10, 2022 On 6/5/2022 at 4:56 PM, maxbrewer said: Is it possible to instead use CSS like this to point to a different image (rather than a straight 'invert'). My colour palette uses a very dark brown on white (rather than pure black) Use this code body[class*="collection-type-blog"] header#header img { content: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg); } Clara_Johnson 1 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
Medvetenkultur Posted December 7, 2022 Share Posted December 7, 2022 (edited) Hi! I have managed to change the logo to a different coloured one at some of my pages (for instance the page "Gallery") by going to the Page settings and paste some code, but for the mobile version I need to fix the size of the logo to max height 78px (that should be the same size as the logo on the other pages). How do I do that? Here is my website, no password:spinach-sprout-hgc2.squarespace.com Edited December 7, 2022 by Medvetenkultur 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