Streaming live at 10am (PST)

Changing SVG icon rollover color

I am working on the nav of my site, and when users get to tablet view and lower I’d like for the nav links to be hidden under a hamburger icon. Clicking the hamburger icon brings up the nav.

I’ve created my own custom hamburger icon, and have added it to my site as an svg file.

However, I couldn’t figure out how to change the icon color on hover / click, and I ended up finding this tutorial on how to do so.

Basically, you use web embed and CSS to change the icon color.

However, the tutorial didn’t really end up working out for me. As when I added my icon, the

<style type="text/css"> .st0{fill:#4353FF;} </style>

part wasn’t included or auto-populated into my code.

I tried adding it manually, but that didn’t work.

In this bit of the code which did already exist <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 38 38" style="enable-background:new 0 0 38 38;" fill="#000000"; hover-fill="#0077C6"; xml:space="preserve"> I found by adding “fill=”#000000";" I could change the color of the icon, but couldn’t figure out how to tweak the hover / on click properties so it’d change color then, too.

I’m totally stumped as to what to do. Any insight or advice is much appreciated!

Here is my site Read-Only: LINK

Make sure your SVG code is included within an HTML Embed (this won’t work if you import the SVG as an image from the asset panel) and update it so fill="currentColor". This will allow you to override the SVG color with the font color property in the styles panel for the hover state :+1:

@mikeyevin That worked, thank you so much!!

1 Like