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

Question

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?

Not really an answer, but you can play around with the navbar-toggler-icon at https://www.advertentiekracht.nl/togglerIcon.html There bootstraps toggler-icon is used as an external style element instead of referring to the bootstrap style-sheet. It is also explained how to manage that. — ben Thijssen, Jul 26 '20 at 13:29

Carol Skelly · Accepted Answer · 2018-10-03T12:23:22.060

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

In Bootstrap 4 beta 1 there is no `.navbar-inverse` class. you can choose from two classes: `.navbar-light` or `.navbar-dark`. — Qrzysio, Aug 22 '17 at 20:38
I copied the SVG url from Chrome to edit it and the stroke path bit was `stroke='rgba%280, 0, 0, 0.5%29'` which I read as `rgba(280, 0, 0, 0.5)` (yes I'm an idiot; 280 > 255) and when I deleted and replaced the `280` it didn't work and it took me a few minutes to realise the %28 was a thing, i.e. url encoded opening parenthesis. — wkille, Feb 01 '21 at 12:54

score 80 · Answer 2 · edited Sep 20 '19 at 04:36

80

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>

edited Sep 20 '19 at 04:36

gtamborero

2,898
27
28

answered Apr 03 '18 at 21:04

Amirreza Mohammadi

958
6
6

4

For fontawesome 5 use bars. https://fontawesome.com/icons/bars?style=solid – Murtaza Bhurgri Oct 24 '18 at 15:04
Do I even need the class="navbar-toggler-icon"? – Joe Dec 06 '20 at 09:34

score 14 · Answer 3 · edited Aug 13 '20 at 18:04

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

Prateek Gupta · Answer 4 · 2020-06-02T20:08:11.820

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!!

score 11 · Answer 5 · edited Aug 07 '22 at 23:16

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>

score 10 · Answer 6 · edited Nov 02 '18 at 16:03

10

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>

edited Nov 02 '18 at 16:03

Blue

22,608
7
62
92

answered Nov 02 '18 at 15:27

Thái An Nguyễn

201
4
10

So when you need a light icon you use the navbar-dark value. – Cerveser Mar 15 '23 at 17:07

Omar Zaoujal · Answer 7 · 2021-01-17T02:40:25.697

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.

score 6 · Answer 8 · edited Jun 26 '22 at 07:19

6

Default bootstrap navbar icon

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

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

edited Jun 26 '22 at 07:19

DINA TAKLIT

7,074
10
69
74

answered Feb 13 '20 at 11:01

iamtheasad

1,017
13
15

score 5 · Answer 9 · answered Oct 02 '20 at 21:22

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.

score 2 · Answer 10 · answered Mar 14 '18 at 02:20

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):

stockersky · Answer 11 · 2018-10-29T14:45:04.010

2

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.

edited Oct 29 '18 at 14:45

answered Oct 29 '18 at 14:28

stockersky

1,531
2
20
36

This only "works" if you use Font Awesome which is not part of Bootstrap – Carol Skelly Nov 30 '18 at 11:18
1

I guess you need to remove the comment on the answer given by Amirreza Mohammadi up the list. Thanks. – NoChance Jan 01 '19 at 08:51
Actually if you remove ```navbar-toggler``` class from button on Bootstrap 4.6 (I do not know the other minor versions of version 4 because I did not try) then it will be visible on desktop view because it is also required for mobile view. – Mycodingproject Aug 26 '21 at 14:59

score 2 · Answer 12 · answered Dec 02 '19 at 04:27

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.

score 1 · Answer 13 · answered Oct 22 '21 at 18:37

1

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

answered Oct 22 '21 at 18:37

Vlad

852
10
23

score 0 · Answer 14 · edited Aug 23 '17 at 14:24

0

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.

edited Aug 23 '17 at 14:24

Arun Vinoth-Precog Tech - MVP

22,364
14
59
168

answered Aug 23 '17 at 13:07

nedeco

41
7

doesn't work in bootstrap 4 in regards to navbar-light – botbot Feb 18 '18 at 07:23

score 0 · Answer 15 · edited Feb 24 '19 at 07:02

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

score 0 · Answer 16 · answered Jul 09 '23 at 12:14

0

you can use this filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

answered Jul 09 '23 at 12:14

Ahmed Abdelaziz

1

Your answer needs some improvement, check [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer#:~:text=Read%20the%20question%20carefully&text=Your%20answer%20can%20say%20%E2%80%9Cdon,or%20simplifications%20in%20your%20answer.) – Salman Malik Jul 11 '23 at 19:46
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Salman Malik Jul 11 '23 at 19:47

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

16 Answers16

Linked

Related