Icon Bar HOver and background COlor

TelosAlpha · April 12

I have the CSS add in for the color of the icons but the hover colour is showing differently on two icons in the icon bar code and I have no idea why?

TelosAlpha · April 12

[icon_bar icon="fab fa-instagram-square" link="https://www.instagram.com/doubletapcanada/" target="_blank" size="5" social="instagram"]

[icon_bar icon="fab fa-facebook-square" link="https://www.facebook.com/DoubleTapSports/" target="_blank" size="5" social="facebook"]

Albert · April 12

Hi,

Icon Bar hover color can be changed in Theme Options > Colors > Elements. Otherwise, you have to customize them with custom css as it's very old element before the BeBuilder was released.

In case you want to use custom, you've got it below:

.mfn-item a.icon_bar {
 color: red;
}
.mfn-item a:hover.icon_bar {
 color: yellow;
}
.mfn-item a.icon_bar {
 background-color: black;
}
.mfn-item a.icon_bar:hover {
 background: red;
}

TelosAlpha · April 12

Thanks for that Albert

I put that in place and the first icon is still hovering red?

Albert · April 13

Where did you put that css exactly? This should be put in Theme Options > Custom CSS & JS > Custom CSS section.

TelosAlpha · April 13

Yep - thats where it is:

Albert · April 15

In such case, please add !important at the end of each css declaration.

Icon Bar HOver and background COlor

Comments