Visual: Display social icons in brand colors then white on hover

  • Unknown's avatar
    nilla2014 · Member ·

    I have png files for my social icons, which are currently white that display in my Nav bar.

    Is there a way that I can display these icons in their individual branding colours, then turn white on hover?

    Do I need to save the png files in the branded colors then replace the current ones? Although I’m not sure if on hover I can change the actual color to white it they’re png files?

    Many thanks :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    You would have to have two logos for each, one in brand colors, and one in white. You would replace the image URLs you have now in your custom CSS for the logos with the brand logo, and then create a “hover” CSS rule for each which would have a background declaration with the white logo in it. The CSS selector for hover on FB would be like this.
    .socialmenu.facebook:hover

  • Unknown's avatar
    nilla2014 · Member ·

    Many thanks @thesacred path!

    I may have to leave that for now as am currently building another .org site for my photography site.
    I only wish that the support in .org was as excellent as .com as the .org site is hard to build. :(

  • kathrynwp · Staff ·

    Thanks for the kind words. :)

    Feel free to post again if you need help with anything else.

  • The topic ‘Visual: Display social icons in brand colors then white on hover’ is closed to new replies.