Jump to content

Inverting logo colour on homepage on Mobile/Tablet

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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

 

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.