title: Change the color of menu icon
body: <p>I want the color of the bars in the menu icon to change on mouse hover. So far I'm only able to change the background color. Any suggestions?</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/Walter69/nwczmdah/5/" rel="nofollow noreferrer">https://jsfiddle.net/Walter69/nwczmdah/5/</a></p>
  
  <pre><code>.container {
  display: inline-block;
  cursor: pointer;
  }
  
  .container:hover {
  color: #fff!important;
  background: #FF0000;
  }
  
  .bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #000;
  margin: 6px 0;
  transition: 0.4s;
  }
  
  /* Rotate first bar */
  .change .bar1 {
  transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  /* Fade out the second bar */
  .change .bar2 {
  opacity: 0;
  }
  
  /* Rotate last bar */
  .change .bar3 {
  transform: rotate(45deg) translate(-8px, -8px);
  }
  </code></pre>