Simple Social Media Icons Background Help

Hiya,

What you need to do is add the below code either into a “custom CSS” area within your themes options area, or if you are using a child theme, then add it to your style.css file.

ul#menu-main .simple-social-icons ul li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

ul#menu-main .simple-social-icons ul li a:hover {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
  color: #000 !important;
}

The first bit of code makes the background for the icons in the header transparant. The second bit makes it transparant on hovering, keeping the icon color the same as what it is now.

Hopefully that makes sense and works for you

It worked!! Thank you so much! Does it matter where to put it in the Style.css?

Not particularly. If its your child themes style.css file, then putting it anywhere would be fine as long as below it you dont put a rule that overrides what I’ve written.

So, in a nutshell, no…it makes no difference really.

I tend to arrange all of my style sheets so they are sectioned (header, menu, content, sidebar, footer, page specific etc.) so if you have done that, then maybe into the section that is relevant?

I am rambling now haha, so will stop!

If you want the hover color to go back, then just remove the color: #000; from the second bit of code i wrote.

But i changed it as when you hover and dont have another specified color, it goes the same color as the background, thus disappearing…If you want a specific color on hover, then get the hexcode (#whatever) for the color, and replace the #000 in the code that i wrote, for your chosen color

No problem! I appreciate the information! Thank you so much!!