How can I change the Bootstrap 4 navbar button icon color?

Css Problem Overview

I have a Bootstrap website where the hamburger toggler is added when the screen size is less than 992px. The code is like so:

<button class="navbar-toggler navbar-toggler-right" 
        type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" 
        aria-expanded="false" 
        aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button>

Is there any possibility to change the color of the hamburger toggler button?

Css Solutions

Solution 1 - Css

The navbar-toggler-icon (hamburger) 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 navbar...

Use navbar-dark for a light/white toggler on darker backgrounds
Use navbar-light for a dark/gray toggler on lighter backgrounds

// 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-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

Therefore, if you want to change the color of the toggler 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");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

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

OFC, another option to just use an icon from another library ie: Font Awesome, etc..

Update Bootstrap 4.0.0:

As of Bootstrap 4 Beta, navbar-inverse is now navbar-dark to use on navbars with darker background colors to produce lighter link and toggler colors.

How to change Bootstrap 4 Navbar colors

Solution 2 - Css

Use a font-awesome icon as the default icon of your navbar.

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

Or try this on old font-awesome versions:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

Solution 3 - Css

If you downloaded bootstrap, go to bootstrap-4.4.1-dist/css/bootstrap.min.css

find the .navbar-light .navbar-toggler-icon or the .navbar-dark .navbar-toggler-icon selector

select the background-image attribute and its value. The snippet looks like this:

.navbar-light .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

copy the snippet and paste it in your custom CSS
change the stroke='rgba(0, 0, 0, 0.5)' value to your preferred rgba value

Solution 4 - Css

You can create the toggler button with css only in a very easy way, there is no need to use any fonts in SVG or ... foramt.

Your Button:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

Your Button Style:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

Your horizontal line Style:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

Demo

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

Solution 5 - Css

Easiest way is replace this default bootstrap code:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

by this :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

And don't forget to add this code also to your file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Hope it helps!!

Solution 6 - Css

just insert class navbar-dark or navbar-light in the nav element:

<nav class="navbar navbar-dark navbar-expand-md">
	<button class="navbar-toggler">
		<span class="navbar-toggler-icon"></span>
	</button>
</nav>

Solution 7 - Css

Yes, just delete this span from your code:  , then paste this font awesome icon that called bars: , add a class to this icon, then put any color you want.

Then, the second step is to hide this icon from the devices that have width more than 992px (desktops width), due to this icon will appear in your interface at any device if you won't add this @media in your css code:

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* the class you gave of the bars icon ↑ */
    .iconClass{
        display: none;
    }
    /* the bootstrap toogler button class */
    .navbar-toggler{
        display: none;
    }
}

It worked for me as well and I found it so easy.

Solution 8 - Css

Default bootstrap navbar icon

Add Font Awesome Icon and Remove class="navbar-toggler-icon"

 

Solution 9 - Css

One simplest way to encounter this is to use font awesome for example

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <span><i class="fas fa-bars"></i></span>
</button>

Then u can change the i element like you change any other ielement.

Solution 10 - Css

As alternative you always can try a simpler workaround, using another icon, for example:

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

ref: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

ref: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

So you gain total control over their color and size:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

(the button's style applied is just for a quick test):

Solution 11 - Css

EDIT : my bad! With my answer, the icon won't behave as a toggler Actually, it will be shown even when not collapsed... Still searching...

This would work :

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

The trick proposed by my answer is to replace the navbar-toggler with a classical button class btn and then, as answered earlier, use an icon font.

Note, that if you keep <button class="navbar-toggler">, the button will have a "strange" shape.

As stated in this post on github, bootstrap uses some "css trickery", so users don't have to rely on fonts.

So, just don't use the "navbar-toggler" class on your button if you want to use an icon font.

Cheers.

Solution 12 - Css

I just developed a considerably easier solution. (Yes, I know this is an old question but someone researching this same issue may find this useful.)

I was using an SVG called hamburger.svg. I looked at it with a text editor and couldn't find anything that was setting a colour for the three lines - I'm guessing it defaults to black because that's certainly the behaviour I get - so I simply added a "stroke" parameter to the definition of the SVG. That didn't QUITE work - the borders of the three lines were my chosen colour (white) but the rest of the line was still black so I added a "fill" parameter as well. And that did the trick!

Here is the code for the original hamburger.svg in its entirety:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

And here is the code for the new SVG after I edited it and saved it as hamburger_white.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

As you can see if you scroll way over to the right, all I did was add:

stroke="white" fill="white"

to the very end of the path. The other thing I had to do was change the file name of the hamburger in the HTML. No messing with the CSS at all and no need to track down another icon.

Easy-peasey! You can imitate this to make your hamburger any colour you like.

Solution 13 - Css

If you work with sass version of bootstrap in _variables.scss you can find $navbar-inverse-toggler-bg or $navbar-light-toggler-bg where you can change the color and style of your toggle button.

In html you have to use navbar-inverse or navbar-light depending on which version you want to use.

Solution 14 - Css

Try to change in your SCSS: $navbar-dark-color: #abcdef; /* <-- here's your color */ or $navbar-light-color: #abcdef; if you're using light.

Solution 15 - Css

Check the best solution for custom hamburger nav.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

demo image

Content Type	Original Author	Original Content on Stackoverflow
Question	Rehan	View Question on Stackoverflow
Solution 1 - Css	Zim	View Answer on Stackoverflow
Solution 2 - Css	Amirreza Mohammadi	View Answer on Stackoverflow
Solution 3 - Css	Eyoab	View Answer on Stackoverflow
Solution 4 - Css	Ghafor Sabury	View Answer on Stackoverflow
Solution 5 - Css	Prateek Gupta	View Answer on Stackoverflow
Solution 6 - Css	Thái An Nguyễn	View Answer on Stackoverflow
Solution 7 - Css	Omar Zaoujal	View Answer on Stackoverflow
Solution 8 - Css	iamtheasad	View Answer on Stackoverflow
Solution 9 - Css	DINA TAKLIT	View Answer on Stackoverflow
Solution 10 - Css	Igor Parra	View Answer on Stackoverflow
Solution 11 - Css	stockersky	View Answer on Stackoverflow
Solution 12 - Css	Henry	View Answer on Stackoverflow
Solution 13 - Css	nedeco	View Answer on Stackoverflow
Solution 14 - Css	Vlad	View Answer on Stackoverflow
Solution 15 - Css	habibullah khan	View Answer on Stackoverflow