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

Home Forums Support Adding social network icons to the menu bar…

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #354663
    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 🙂

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #354749
    Leo
    Staff
    Customer Support

    Hi Ian,

    This should work:

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

    Let me know.

    #354804
    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?

    #354811
    Tom
    Lead Developer
    Lead Developer

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

    #354857
    Ian

    Oooh, awesome!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.