Bootstrap 4 Change Hamburger Toggler 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    lt 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  gt        lt span class  navbar-toggler-icon  gt  lt  span gt    lt  button gt    Is there any possibility to change the color of the hamburger toggler button

User · Answer

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

User · Answer

One simplest way to encounter this is to use font awesome for example   lt button class  quot navbar-toggler quot  type  quot button quot  data-toggle  quot collapse quot  data-target  quot  navbarCollapse quot  aria-controls  quot navbarCollapse quot  aria-expanded  quot false quot  aria-label  quot Toggle navigation quot  gt          lt span gt  lt i class  quot fas fa-bars quot  gt  lt  i gt  lt  span gt   lt  button gt   Then u can change the i element like you change any other ielement

User · Answer

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     lt button class  btn btn-primary  type  button  data-toggle  collapse       data-target   navbarSupportedContent  aria-controls  navbarSupportedContent      aria-expanded  false  aria-label  Toggle navigation  gt       lt span gt           lt i class  fas fa-bars  gt  lt  i gt       lt  span gt   lt  button gt    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  lt button class  navbar-toggler  gt   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

User · Answer

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    lt button       class  navbar-toggler collapsed       data-target   navbarsExampleDefault       data-toggle  collapse  gt           lt span class  line  gt  lt  span gt            lt span class  line  gt  lt  span gt            lt span class  line  gt  lt  span gt   lt  button gt    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   x000D   x000D   navbar-toggler  x000D      width  47px  x000D      height  34px  x000D      background-color   7eb444  x000D      border none  x000D    x000D   navbar-toggler  line  x000D      width  100   x000D      float  left  x000D      height  2px  x000D      background-color   fff  x000D      margin-bottom  5px  x000D    x000D   lt button class  navbar-toggler  data-target   navbarsExampleDefault  data-toggle  collapse  aria-expanded  true   gt  x000D           lt span class  line  gt  lt  span gt   x000D           lt span class  line  gt  lt  span gt   x000D           lt span class  line  style  margin-bottom  0   gt  lt  span gt  x000D   lt  button gt  x000D   x000D   x000D

User · Answer

Check the best solution for custom hamburger nav    x000D   x000D   import  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css   x000D   bg-iconnav   x000D    background   f0323d  x000D       Old browsers    x000D    background  -moz-linear-gradient top   f0323d 0    e6366c 100    x000D       FF3 6-15    x000D    background  -webkit-linear-gradient top   f0323d 0    e6366c 100    x000D       Chrome10-25 Safari5 1-6    x000D    background  linear-gradient to bottom   f0323d 0    e6366c 100    x000D       W3C  IE10   FF16   Chrome26   Opera12   Safari7     x000D    filter  progid DXImageTransform Microsoft gradient  startColorstr   f0323d   endColorstr   e6366c   GradientType 0   x000D       IE6-9    x000D    border-radius  0  x000D    padding  10px  x000D    x000D   x000D   navbar-toggler-icon   x000D    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    x000D    x000D   lt button class  navbar-toggler bg-iconnav  type  button  gt  x000D   lt span class  navbar-toggler-icon  gt  lt  span gt  x000D   lt  button gt  x000D   x000D   x000D    demo image

User · Answer

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

User · Answer

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

User · Answer

Yes  just delete this span from your code   lt span class  quot navbar-toggler-icon quot  gt  lt  span gt    then paste this font awesome icon that called bars   lt i class  quot fas fa-bars quot  gt  lt  i gt   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

User · Answer

Default bootstrap navbar icon   lt span class  navbar-toggler-icon  gt  lt  span gt   Add Font Awesome Icon and Remove class  navbar-toggler-icon    lt span gt          lt i class  fas fa-bars  style  color  fff  font-size 28px   gt  lt  i gt   lt  span gt

User · Answer

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

User · Answer

Use a font-awesome icon as the default icon of your navbar    lt span class  navbar-toggler-icon  gt          lt i class  fas fa-bars  style  color  fff  font-size 28px   gt  lt  i gt   lt  span gt      Or try this on old font-awesome versions    lt span class  navbar-toggler-icon  gt          lt i class  fa fa-navicon  style  color  fff  font-size 28px   gt  lt  i gt   lt  span gt

User · Answer

just insert class navbar-dark or navbar-light in the nav element    lt nav class  navbar navbar-dark navbar-expand-md  gt       lt button class  navbar-toggler  gt           lt span class  navbar-toggler-icon  gt  lt  span gt       lt  button gt   lt  nav gt

User · Answer

As alternative you always can try a simpler workaround  using another icon  for example         lt button type  button  style  background none border none  gt       lt span class  fa fa-reorder  gt  lt  span gt   lt  button gt    ref  https   www w3schools com icons fontawesome icons webapp asp      lt button type  button  style  background none border none  gt       lt span class  glyphicon glyphicon-align-justify  gt  lt  span gt   lt  button gt    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

User · Answer

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    lt  xml version  1 0    gt  lt  DOCTYPE svg  PUBLIC  -  W3C  DTD SVG 1 1  EN    http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt  lt 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  gt  lt 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   gt  lt  svg gt    And here is the code for the new SVG after I edited it and saved it as hamburger white svg    lt  xml version  1 0    gt  lt  DOCTYPE svg  PUBLIC  -  W3C  DTD SVG 1 1  EN    http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt  lt 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  gt  lt 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   gt  lt  svg gt    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

[css] Bootstrap 4 Change Hamburger Toggler Color

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4