CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user3691280
user3691280

Reputation: 259

How to change Bootstrap toggle navigation color?

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.

Upvotes: 5

Views: 46432

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 13

Alex C.
Alex C.

Reputation: 1

Like @zim I add this in css changing the stroke color rgba:

.navbar-light button.navbar-toggler.collapsed span.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(108, 99, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

This is the color when 'collapsed', if you want add a color when the hamburger is not collapsed, first, in the button, you need to add a class 'collapsed', because this class is added only after the first clic, and then, in the css style file, you need to add the same code with differend stroke color without the class collapsed like this:

.navbar-light button.navbar-toggler span.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(253, 92, 99, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

Upvotes: 0

timSully
timSully

Reputation: 137

Adding on to Prashant's example you can target the span's color specifically by changing the CSS input to:

#nav-toggle-button span {
    background-color: black;
}

Upvotes: 0

Prashant
Prashant

Reputation: 704

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

Upvotes: 2

Related Questions