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
