Make social icon hover colors the default

Where might I find the CSS for the hover state of the social icons?

I added the social button to my client’s site and now they want the icon to show up the way they do when hovered over (each with their branded colors like FB blue ringing around them) as the default state. I’ve searched the forum for the same questions hoping to find where that hover CSS code is and can’t find it. I’m sure it’s in one of the parent theme’s CSS files and all that I’d need to do is copy and paste then remove hover but I can’t find where anyone else has asked this.

So where might that code be?

Hi there,

You can use this in the custom CSS:

.x-social-global a:hover.facebook {
    background-color: #3b5998;
}

.x-social-global a:hover.twitter {
    background-color: #00abf0;
}

.x-social-global a:hover.instagram {
    background-color: #3f729b;
}

.x-social-global a:hover.pinterest {
    background-color: #cd1f28;
}

Hope this helps.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.