Toggle Icon-bar color change on hover using Bootstrap

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:

.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;

The hover code I used was:

.navbar-preheader .navbar-toggle .icon-bar:hover { background-color: #4d4d4d; }

But this is basically making each icon-bar change color, individually (see below), but they should all change color at once…

enter image description here enter image description here

I am sure it’s something silly I am missing, but any help is much appreciated. Thank you.


You are wanting to change the background color when hovering over the parent element, therefore the :hover pseudo class should be after .navbar-toggle as opposed to the .icon-bar. In other words, you should use the selector .navbar-toggle:hover .icon-bar.

Example Here

.navbar-preheader .navbar-toggle:hover .icon-bar { background-color: #4d4d4d; }