-1

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.

enter image description here

Andrew Hendrie
  • 6,205
  • 4
  • 40
  • 71

1 Answers1

6

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

}
derdida
  • 14,784
  • 16
  • 90
  • 139