title: Toggle Icon-bar color change on hover using Bootstrap
body: <p>I am trying to make the .icon-bar class change color when you hover over it. I got the toggle button to change color and the icon-bar using:</p>
  
  <pre><code>.navbar-preheader .navbar-toggle {
      border: 1px solid white;
      background-color: transparent;
      margin-right: 0;
  }
  
  .navbar-preheader .navbar-toggle:hover {
      background-color: #4d4d4d;
  }
  
  .navbar-preheader .navbar-toggle .icon-bar {
      background-color: white;
  }
  </code></pre>
  
  <p>The hover code I used was:</p>
  
  <pre><code>.navbar-preheader .navbar-toggle .icon-bar:hover {
      background-color: #4d4d4d;
  }
  </code></pre>
  
  <p>But this is basically making each icon-bar change color, individually (see below), but they should all change color at once...</p>
  
  <p><img src="https://i.stack.imgur.com/tPtic.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/GYmtQ.png" alt="enter image description here"></p>
  
  <p>I am sure it's something silly I am missing, but any help is much appreciated. Thank you.</p>