How to change Bootstrap toggle navigation color?

Question

From what I see this is the code for the toggle-navigation button:

<button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

I added id="nav-toggle-button" and gave it this CSS:

#nav-toggle-button {
color: gray;
}

but nothing has changed. I tried adding !important as well, without success and I don't know what else to try. Anybody knows?

EDIT: Here's a fiddle with a solution suggested by Prashant123 (sorry, not enough reputation to vote up your answer!): http://jsfiddle.net/LuKSB/1/ it's way better already, but it would be perfect if the horizontal lines inside the button would be visible (white). I guess it would be changing the color, but it doesn't work.

Answer 1

Changes for Bootstrap 4

The navbar-toggler-icon in Bootstrap 4 uses an SVG background-image. There are 2 versions of the toggler icon image. One for a light navbar, and one for a dark (inverse) navbar...

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

If you want to change the color of this image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)' value in the SVG data..

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

Demo http://codeply.com/go/4FdZGlPMNV

Answer 2

try this DEMO html

<button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

css

#nav-toggle-button{
    background-color:red;
}