Jump to content

Social links changing colour when hovering over them!

Go to solution Solved by sorca_marian,

Recommended Posts

Hi!

We've got four social links on our website - http://www.crafnanthouse.com

Using custom code the first three change colour to yellow when you hover over them. We have just added further code to change the WhatsApp icon to the correct one (it was the chain icon before), but the WhatsApp logo is permanently yellow.

This is the current code we have to do all of that:

[href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
[href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px; /* Adjust the size as needed */
}
.sqs-block-button-element:hover {
 text-decoration: none !important;
}
.image-button a:hover {
 text-decoration: none !important;
}
.sqs-svg-icon--wrapper:hover .sqs-use--icon {fill: hsl(51, 100%, 42%)!important;}

 

Could anyone advise on what to change so all the icons change to yellow when hovering? Thanks!!!!

Screenshot 2024-03-10 at 14.10.11.png

Edited by crafnanthouse
Add hyperlink to website
Link to comment
  • Replies 5
  • Views 945
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Hi,

Add this CSS below the existing one

.sqs-svg-icon--wrapper::before {
    color : #fff;
}

.sqs-svg-icon--wrapper:hover::before {
    color : #d6b600;
}

 

Edited by sorca_marian
Link to comment
  • Solution

Sure

.sqs-svg-icon--wrapper::before {
    color : #fff;
}

.sqs-svg-icon--wrapper:hover::before {
    color : #d6b600;
}

.social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list:hover [href*="wa.me"] {
    opacity : 0.4;
}

.social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list [href*="wa.me"]:hover {
    opacity : 1;
}

 

Link to comment

😀👍

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.