[lindaParticipant]

How can I change the hover color of the social icons in my top bar?
At the moment each icon has a circle with color when I hover. I want all the icons have 1 color when I hover.
And the shape is this always round?

Thanks

[lindaParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Try adding the following CSS under Customize > Custom > CSS:

.x-social-global a:hover {
    color: #fff;
}

Hope it helps.

[lindaParticipant]

It doesn’t fix the problem, the inner circle has another color indeed, but the outside is still different.

[FriechModerator]

Hi There,

Part of the issue is; the inner circle is the icon itself. We can keep the circle (hovered or not) with the code below.

.x-topbar .x-social-global a {background-color: #000000 !important;color: #fff !important;}

But we need to change the icons itself to a logo only type, not squared type like the the one that we are seeing now. To do that add this to your custom css.

 .x-topbar .x-icon-facebook-square:before {content: "\f09a"} 
 .x-topbar .x-icon-google-plus-square:before {content: "\f0d5"}

Hope it helps, Cheers!

[lindaParticipant]

I think we have a misunderstanding.
I am okay with the icon and the shape.
But when I hover the color above Facebook is blue and google + red (see attachment)
And I just want to have the inner circle.

[ZeshanMember]

Hi Linda,

To avoid changing the background color of social icons on hover, please use this CSS code under Custom > CSS in the Customizer:

.x-topbar .x-social-global a:hover {
    background-color: #ff0000;
}

Replace #ff0000 with your desired color (you can generate hex color codes from here).

Thank you!

[lindaParticipant]

Great, that was exactly what I needed.

[ChristopherModerator]

Glad we could help you.

[Author]

Posts