CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3toggle
bobbyo23
bobbyo23

Reputation: 189

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.

Upvotes: 11

Views: 23826

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

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

Upvotes: 19

Related Questions