Inverting logo colour on homepage on Mobile/Tablet

Site URL: https://www.stampdesignco.com

Hello,

I'm desperately needing some help.

I've managed to Invert my logo colour on my homepage only (so it now displays as white), but it's still displaying as Black when viewed on Mobile and Tablet. 

Can anyone help at all?

Thanks so much,

Emma

You're targeting the desktop logo, but you also need to target the mobile logo with this class: .Mobile-bar-branding-logo something like this:

.Header-branding-logo, .Mobile-bar-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

Make sure to keep the page targeting that you've already worked out.

Hope this helps!

28 minutes ago, Ziggy said:

You're targeting the desktop logo, but you also need to target the mobile logo with this class: .Mobile-bar-branding-logo something like this:

.Header-branding-logo, .Mobile-bar-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

Make sure to keep the page targeting that you've already worked out.

Hope this helps!

Thanks so much! That ended up changing it on every page, do you know how I just change it on the homepage, but keep the other pages black? Thanks!

1 hour ago, Emma456 said:

Thanks so much! That ended up changing it on every page, do you know how I just change it on the homepage, but keep the other pages black? Thanks!

 

Yes, you need to target your homepage either by adding the collection ID in CSS or in the page header injection, but I think you need this in your Custom CSS:

#collection-5f1049435db09b32638d151e {
  .Header-branding-logo, .Mobile-bar-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}
}

Please upvote if this has helped you, cheers!