Change the color of my logo on a different page

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? 

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! 

Hey @inside_the_square this was very helpful, but how do I reflect this change on the mobile version?

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

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

@tuanphan here is the site: corecompassing.squarespace.com

Thank you so much for all your help!

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>

This worked! You are amazing! I really appreciate all your help. @tuanphan

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?

🙏🏾💚🌈

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?

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:

1. Add the image size to the CSS;
2. Insert a larger image into the CSS.

The question is: is option 1 a possibility?

🙏🏾

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:

1. Add the image size to the CSS;
2. Insert a larger image into the CSS.

The question is: is option 1 a possibility?

🙏🏾

You can follow this to share url

Can this be done any other way without having a premium account? I can't post any personalized CSS into single pages...

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

Thank you so much!! For solving this and for the great tip 🙂