Archived topic

Adding social network icons to the menu bar...

4 replies · Started by Ian on July 25, 2017

Viewing posts 1–5 of 5

July 25, 2017 at 8:53 am #354663

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 :)

July 25, 2017 at 11:15 am #354749

Hi Ian,

This should work:

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

Let me know.

July 25, 2017 at 1:47 pm #354804

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?

July 25, 2017 at 2:15 pm #354811

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

July 25, 2017 at 3:43 pm #354857

Oooh, awesome!

This archived topic is closed to new replies.

Start building better websites today.