Jump to content

Automatically Change Header Social Link Colour Based on Background

Recommended Posts

Hi All,

First post so apologies if this is a repeat topic.

I've created a custom link icon for the 2nd link in my headers social link block. Its uploaded and works in the block fine, however I would like it to invert colours automatically so it can be visible on brighter backgrounds. 

Here is my current CSS: 

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(2) {
    svg {
    background-image: url(https://static1.squarespace.com/static/5ff9e3adfcd25633938fb07d/t/6426fd682bbee81914523c6a/1680276840395/glass.png);     
    background-size: 90%;    
    background-repeat: no-repeat; 

I have tried filter: invert(1); but no luck there. Whilst it did invert the colours it made a permanent change rather than just inverting on brighter backgrounds.


On this page is how the icons display normally: https://jamiecozier.com/

And on a page with a brighter background: https://jamiecozier.com/prints


Any help would be greatly appreciated!

Link to comment
  • Replies 1
  • Views 242
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.