[Resolved] Adding social network icons to the menu bar…

[Ian]

Hi folks,

I found a topic on here that allows me to add some fontawesome icons for Facebook, Twitter and Instagram to the menu bar, and it works just fine except I want to change the hover background color for these icons to match the respective network colours.

Here’s the CSS I added to GP…

.main-navigation li.social_icon_facebook {
    float: right; !important
}
.main-navigation li.social_icon_twitter {
    float: right; !important
}
.main-navigation li.social_icon_instagram {
    float: right; !important
}

And here are the CSS classes I’ve added to the menu options…

social_icon_twitter
social_icon_facebook
social_icon_instagram

All good so far. All I need to do now is work out how to change the hover color for each of these, should be easy now that I have CSS classes but I’m missing the target somewhere.

Here’s the website I’m working on…

http://www.discofever.co.uk/2k18

Please help if you can 🙂

[Leo]

Hi Ian,

This should work:

.main-navigation .main-nav ul li.social_icon_instagram a:hover {
    background-color: #ffffff;
}

Let me know.

[Ian]

Hi

Yep that works perfectly.

So now all I need to do is remove those icons from the mobile menu, is there an easy way to do that or should I do it with a media query?

[Tom]

You can give them this class as well: hide-on-mobile

[Ian]

Oooh, awesome!

[Author]

Posts