MILLER: Alternate/Invert Logo on single page

Hi There,

Another iteration of an oft-asked question.

How can I change the logo on just one page (homepage) of a site? I am using the Miller Theme. The homepage is a full width background image and I want to have the logo be white where it is usually black

I have tried 

<style>.Header-branding-logo { -webkit-filter: invert(100%) !important; filter: invert(100%) !important; }</style>

amongst some other suggestions made on this site, but none seem to be working for me.

Thanks!

Add to Home Page Settings > Advanced > Header.

This code will change home logo to different logo. So you need to replace image url in below code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(".Header-branding-logo").attr('src','https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg');
});
</script>

Thank you tuanphan! 

It still doesn't seem to work for me though! I uploaded the image to squarespace via the Custom CSS > Manage custom files and pasted the link but it doesn't change the logo. Unless I'm doing something wrong?

2 hours ago, Lummy said:

Thank you tuanphan! 

It still doesn't seem to work for me though! I uploaded the image to squarespace via the Custom CSS > Manage custom files and pasted the link but it doesn't change the logo. Unless I'm doing something wrong?

 

Can you keep the code & share link to your site?

Sure thing:

https://dachshund-bat-ckxe.squarespace.com/

Password : squarespace

Thanks!

36 minutes ago, Lummy said:

Sure thing:

https://dachshund-bat-ckxe.squarespace.com/

Password : squarespace

Thanks!

Can you insert the code first & let me know? I just checked & don't see the code on this page https://dachshund-bat-ckxe.squarespace.com/

You can also use this code (Home > Design > Custom CSS) to change to white logo

.homepage .Header-branding-logo {
    filter: invert(1);
}

That's strange because the code is there - or should be there! See screengrab attached

2 minutes ago, Lummy said:

That's strange because the code is there - or should be there! See screengrab attached

 

Weirddd, remove above code, and add this to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(".homepage .Header-branding-logo").attr('src','https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg');
});
</script>

Hmmm, I can only see a place to put code in the header

Go back to main menu > Settings > Advanced > Code Injection > Footer

That worked! Amazing, thank you so much tuanphan!