Jump to content

How to get a different logo on the homepage

Go to solution Solved by christyprice,

Recommended Posts

  • Solution

Excuse me, for bothering you again.
How do I get my mobile logo (I have a different one), also invert on the homepage?
Your following code works perfectly for desktop, but my mobile logo didn't change it's color
Thank you very much in advance.
Best,
D*
 

<style>
 .header-title-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

 

Link to comment

Hi D,

Thanks so much for your kind words about my site!

Are you perhaps using a different logo on mobile? If you could drop a link to your site I'd be happy to take a look.

Christy

Link to comment

@DomBerlino thanks for sharing that! Yes, you need to target an additional class for the different mobile logo. So you'll replace the code you were using with this:

<style>
 .header-title-logo img, .header-mobile-logo img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Hope this solves it!

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.