Superfly Menu Icon Color Change on Hover

[Nuera]

This should be simple enough I hope…

We are working on this site currently and I have a custom icon for my Superfly Menu Button. I am looking to change the color on hover to #ff2a68.

Nuera | Jacksonville Marketing Agency

I’m not sure if this is a CSS or JS edit, but if it had a nice little .3 sec transition, that would also be amazing.

Thank you in advance!

[christian]

Hey @Nuera,

There’s no option for this and you’ll need to convert your SVG icon which is used as a background to a different color. Then, override the background using custom CSS. Here’s a sample code.

.la_icon_manager_custom:hover {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAyNSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZjJhNjg7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5pY29uX3JvdW5kZWQ8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNi4yNSIgaGVpZ2h0PSI2LjI1IiByeD0iMy4xMiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iOS4zOCIgd2lkdGg9IjYuMjUiIGhlaWdodD0iNi4yNSIgcng9IjMuMTIiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjE4Ljc1IiB3aWR0aD0iNi4yNSIgaGVpZ2h0PSI2LjI1IiByeD0iMy4xMiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeT0iOS4zOCIgd2lkdGg9IjYuMjUiIGhlaWdodD0iNi4yNSIgcng9IjMuMTIiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjkuMzgiIHk9IjkuMzgiIHdpZHRoPSI2LjI1IiBoZWlnaHQ9IjYuMjUiIHJ4PSIzLjEyIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxOC43NSIgeT0iOS4zOCIgd2lkdGg9IjYuMjUiIGhlaWdodD0iNi4yNSIgcng9IjMuMTIiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjE4Ljc1IiB3aWR0aD0iNi4yNSIgaGVpZ2h0PSI2LjI1IiByeD0iMy4xMiIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iOS4zOCIgeT0iMTguNzUiIHdpZHRoPSI2LjI1IiBoZWlnaHQ9IjYuMjUiIHJ4PSIzLjEyIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxOC43NSIgeT0iMTguNzUiIHdpZHRoPSI2LjI1IiBoZWlnaHQ9IjYuMjUiIHJ4PSIzLjEyIi8+PC9nPjwvZz48L3N2Zz4=) no-repeat !important;
    background-size:25px !important;
    background-position: center !important;
}

Background images could not be transitioned. It might be possible using some hacks or JS but that would be veering into custom development which is outside the scope of our support.

Hope that helps and thank you for understanding.

[Nuera]

Hey Christian - great work, this is slick!

I’ll search around for some JS at some point, but this accomplishes my goal for now.

Thanks again!!!

[jade]

You’re welcome. Nuera.