Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 19, 2016 at 8:33 pm #662705
    marcosreal

    Hello!

    So right now I have the social icons in the navigation menu. When you hover over them they have a round background color that matches their brand. Facebook blue, twitter, teal, instagram brownish.

    My question is: Instead of hovering over the social icons to show that circular color, what coding would I need to have them stay at a stagnant color. The same color that they have now when you hover, but with no hover have them stay that color. Does that make sense?

    July 20, 2016 at 1:07 pm #662935
    Rikard

    Hi marcosreal,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    July 20, 2016 at 7:16 pm #663092
    marcosreal

    Basically I want the social links at the header and footer to stay the same color as it is when you hover over them with a mouse. I want them to stay the same color. Right now they are just white.

    July 21, 2016 at 5:03 am #663188
    Jordan

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
.av-social-link-facebook a {
color:#37589b !important;
}

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

.av-social-link-instagram a {
color:#a67658 !important;
}

    Best regards,
    Jordan

    July 21, 2016 at 7:53 am #663223
    marcosreal

    I appreciate the effort, and it did work, but I look back now and notice I didn’t explain the design of it correctly. So I still want the icon to be white, I just want the colored circle padding to be seen even without hovering over the icon.

    July 21, 2016 at 9:56 am #663260
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #top #wrap_all .av-social-link-facebook {
    color: #fff;
    background-color: #37589b!important;
    border-radius:50px;
    margin-right:10px;
}

#top #wrap_all .av-social-link-twitter {
    color: #fff;
    background-color: #46d4fe!important;
    border-radius:50px;
    margin-right:10px;
}

#top #wrap_all .av-social-link-instagram {
    color: #fff;
    background-color: #a67658!important;
    border-radius:50px;
}

    Best regards,
    Vinay

    July 21, 2016 at 4:38 pm #663455
    marcosreal

    You guys are awesome, the last one worked perfectly, thank you!!!!!!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘social icons color’ is closed to new replies.