I was looking for a way to change the hover color of the Instagram FA icon in the footer because all the icons appear to be very similar shades of blue. Since Instagram changed their app icon, I wanted to make the colored square that appears behind the icon on hover this color: 9933ff
I tried adding the code into Custom CSS, but I think because there’s a color set for the icon in the theme’s CSS that the custom code isn’t working. I went into “style.css” and thought I got it all changed, but the hover color is still blue.
And now I’ve noticed that instead of the social icons in the header turning their respective colors on hover, they all turn orange now, which is the color associated with the custom social icon I added and styled via custom CSS.
Anyone have any idea how I can get this little situation fixed?
Oh, my website is right here. Forgot to include a link.
Hello DaneOLeary,
If you want to change the hover background color for your Instagram social icon, you should use a bit of CSS code to do that. Try the code below and place it in Theme panel->Custom CSS area.
The code is ->
.td-social-style2 .td-social-icon-wrap:hover .td-icon-instagram {
background-color: green;
}
The result is here -> http://screencast.com/t/vwm0bWq8MeSK
Thanks for the message!
That worked perfectly, thank you.
What about getting the hover colors to change for the social icons at the top of the page? I’m pretty sure I remember each of them changing to their own specific color on hover, but right now they all turn orange on hover.
Hello DaneOLeary,
Try the code below ->
.td-header-sp-top-widget .td-social-icon-wrap .td-icon-instagram:hover {
color: green!important;
}
The result is here -> http://screencast.com/t/XLZXJgXOFj3U
Thanks.
