Change Color of SVG mobile hamburger icon on Hover

Question

I am trying to change the mobile hamburger menu icon to fit the color of my logo when the mouse is over -

.menu-hamburger:hover {
  fill: #FFB400!important;
}   

<a href="#"> 

<svg class="menu-hamburger">
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger" class="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>

but still no luck

Answer 1

When using <use xlink:href="#" , the SVG content falls into the DOM shadow and the styling result depends on the style hierarchy of the external, internal CSS style sheet, SVG presentation styles What will be the result of the struggle of these styles is not always easy to foresee..

Therefore, in the adjacent answer, the rule fill: #FFB400!important; But this is a very bad practice that can break the rest of the layout.

The style hierarchy can be seen in the image below from the article: By Sara Soueidan Styling SVG Content with CSS

Computed Styles has the biggest weight.
Therefore, it is most reliable to use CSS variables for CSS styling.

.menu-hamburger {
margin:1em;
}
#u1,#u2 {
 fill:black;
 
 }
 #u1:hover {
 --primary-color: red;
 cursor:pointer;
 }
  #u2:hover {
 --primary-color: green;
 }

<a href="#"> 

<svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
   <use id="u1" xlink:href="#menu-hamburger"  ></use>
</svg> 
<svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
   <use id="u2" xlink:href="#menu-hamburger"  ></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 16 16">
         <symbol   class="menu-hamburger">
             
          <g id="menu-hamburger" style="fill: var(--primary-color, black)">
            <rect width="100%" height="100%" fill="transparent" />
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
            </g>
       </symbol>
  
</svg>

UPDATE

By applying CSS variables you can implement multi-color icons

.menu-hamburger {
margin:1em;
}
#u1,#u2 {
 fill:black;
 
 }
 #u1:hover {
 --primary-color: green;
 --second-color: gold;
 --third-color: red;
 cursor:pointer;
 }
  #u2:hover {
  --primary-color: purple;
 --second-color: greenyellow;
 --third-color: dodgerblue;
 }

<a href="#"> 
    <svg class="menu-hamburger" width="96" height="96" viewBox="0 0 16 16">
       <use id="u1" xlink:href="#menu-hamburger"  ></use>
    </svg>  
</a>
<a href="#"> 
    <svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
       <use id="u2" xlink:href="#menu-hamburger"  ></use>
    </svg> 
</a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 16 16">
       <defs>
         <symbol   class="menu-hamburger">
             
          <g id="menu-hamburger" style="fill: var(--primary-color, black)">
             <rect width="100%" height="100%" fill="transparent" />
            <rect y="1" width="16" height="2" style="fill: var(--primary-color)"></rect>
            <rect y="7" width="16" height="2" style="fill: var(--second-color)"></rect>
            <rect y="13" width="16" height="2" style="fill: var(--third-color)"></rect>
            </g>
       </symbol>
  </defs>
</svg> 

Answer 2

In this example I changed the <a> to a <button> because the action of clicking it is not navigating somewhere but opening a menu. It has the same properties. Controlling the width and the height of the menu is done using the button#menu-hamburger svg selector together with the fill color. So, now using a similar selector (button#menu-hamburger:hover svg) for hover the menu changes color without problem. I added the hover to the button so that you also "hover" when the pointer is in between the bars in the hamburger menu.

button#menu-hamburger {
  display: block;
  border: none;
  background: transparent;
}

button#menu-hamburger svg {
  fill: #000;
  width: 16px;
  height: 16px;
}

button#menu-hamburger:hover svg {
  fill: #FFB400;
}

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <defs>
    <symbol id="menu-hamburger" viewBox="0 0 16 16">
      <rect y="1" width="16" height="2"></rect>
      <rect y="7" width="16" height="2"></rect>
      <rect y="13" width="16" height="2"></rect>
    </symbol>
  </defs>
</svg>

<button id="menu-hamburger"> 
  <svg xmlns="http://www.w3.org/2000/svg">
    <use href="#menu-hamburger"/>
  </svg>
</button>

Answer 3

Try this.

svg.menu-hamburger :hover {
      fill: #FFB400!important;
    }

<a href="#"> 

<svg class="menu-hamburger">
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger" class="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>