Twitter Bootstrap Responsive Navigation (btn-navbar, icon-bar) color changes

Question

I'm working with Bootstrap and focusing on the mobile navigation. When hovered over, the icon (three horizontal lines) has a grey background color; however, the background color only goes halfway up the icon (see image). I don't mind this background color but I'd like to to be over the full icon with rounded edges on top as they are on the bottom. How can I make this happen? Any ideas/suggestions appreciated.

Answer 1

You need to change to Icon Bar color, showed in:

<span class="icon-bar"></span>

Set the Color you would like to have with CSS

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

And you can also set the Background Color of the Button.

.navbar-toggle {
    background-color: #666;
}

If you want to Change the Color on Focus, then just adjust the :focus Tag in Bootstrap:

.navbar-toggle:focus {

// set the new color here for focus

}

and

.navbar-toggle:focus .icon-bar {

// here for the 3 white Stripes

}