Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 9, 2016 at 5:31 am #580118
    mcraig77

    Ahoy –

    How do I change the social icons color in the header?

    I would like to know:
    1. Icon color when not rollover
    2. Icon color when rolled over
    3. Icon circle color when rolled over

    Thanks!

    February 9, 2016 at 10:49 am #580266
    Guenni007

    the background color font color by hovering these icons is made for each icon f.e.

    
#top #wrap_all .av-social-link-twitter:hover a {
    background-color: #46d4fe;
    color: #fff;
}

    but you have to do it for each icon – so you have to know the name of that social-link ( in that case above it is easy “twitter”)

    the font color of the icons are set by:

    .social_bookmarks_twitter > a {
    color: #900 !important;
}

    but you see here too. It has to be than for each social-link

    • This reply was modified 8 years, 9 months ago by Guenni007.
    February 9, 2016 at 1:06 pm #580371
    Vinay

    Hi!

    Please add the above code to Enfold > General Styling > Quick CSS let us know if you need anything else.

    Thanks again @Guenni007 for sharing your tip :)

    1. Icon color when not rollover

     .social_bookmarks li a {
    color: red!important;
}

    2. Icon color when rolled over

     .av-social-link-twitter:hover a {
    color: #fff!important;
    background-color: #46d4fe!important;
}

    3. Icon circle color when rolled over
    same as above but make sure the icon name matches the class name such as “facebook, twitter” and change the background color. you can find this out by right clicking on the icon and inspect the html for class names.

    .av-social-link-facebook:hover a

    Best regards,
    Vinay Kashyap

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