Jump to content

MILLER: Alternate/Invert Logo on single page

Recommended Posts

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!

Screen Shot 2020-03-13 at 18.31.15.png

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>

 

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

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?

Screen Shot 2020-03-14 at 20.04.13.png

Screen Shot 2020-03-14 at 20.03.29.png

Link to comment
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?

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
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);
}

image.thumb.png.c2ab6cb669633d86b380763028a67797.png

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
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>

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.