[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
  • #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…


    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…


    Please help if you can 🙂

    GeneratePress 1.3.48
    GP Premium 1.3.1
    Customer Support

    Hi Ian,

    This should work:

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

    Let me know.



    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?

    Lead Developer
    Lead Developer

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


    Oooh, awesome!

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