How to change Hamburger Toggler color in Bootstrap ?

The hamburger toggler color can be changed in Bootstrap 4 using 2 methods:

Method 1: Using the inbuilt color classes

The hamburger toggler color is controlled by the two inbuilt classes used for changing the color of the text in the navigation bar:



  • .navbar-light: This class is used to set the color of the navigation bar text to dark. It is will change the toggler icon to have dark lines.
  • .navbar-dark: This class is used to set the color of the navigation bar text to light. It is will change the toggler icon to have white lines.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      How to change Hamburger Toggler color in Bootstrap ?
  </title>
  
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <nav class="navbar navbar-light bg-lignt">
        <a href="/" class="navbar-brand">
          Light Toggler
      </a>
        <button class="navbar-toggler ml-auto" 
                type="button" 
                data-toggle="collapse"
                data-target="#nav1">
            <span class="navbar-toggler-icon my-toggler">
          </span>
        </button>
        <div class="navbar-collapse collapse" id="nav1">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link"
                       href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       href="#">Link 2</a>
                </li>
            </ul>
        </div>
    </nav>
    <nav class="navbar navbar-dark bg-dark">
        <a href="/" class="navbar-brand">
          Dark Toggler
      </a>
        <button class="navbar-toggler ml-auto" 
                type="button"
                data-toggle="collapse" 
                data-target="#nav2">
            <span class="navbar-toggler-icon">
          </span>
        </button>
        <div class="navbar-collapse collapse" 
             id="nav2">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link"
                       href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" 
                       href="#">Link 2</a>
                </li>
            </ul>
        </div>
    </nav>
  
    <div class="container">
        <h1 style="color: green">
          GeeksforGeeks
      </h1>
        <b>How to change Hamburger Toggler
          color in Bootstrap ?</b>
        <p>The above togglers use the default 
          color classes available for toggler.</p>
    </div>
  
    <script src=
  </script>
    <script src=
  </script>
    <script src=
  </script>
</body>
  
</html>

chevron_right


Output:
inbuilt

Method 2: Creating a custom class for the toggler

Bootstrap uses an SVG image for representing the toggler. A new image data can be created with modified colors on the lines inside the icon. The stroke property inside the image data is used to represent the color in RGB values. This value is modified to the color required.

This new icon is used in the .navbar-toggler-icon class with the background-image so that the inbuilt icon gets replaced with this new toggler icon.

/* Change the color in the stroke property of the image 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(0, 128, 0, 0.8)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
}

The border color of the toggler set by specifying the border-color property with the color required.

filter_none

edit
close

play_arrow

link
brightness_4
code

/* Set the border color to the desired color */
.custom-toggler.navbar-toggler {
    border-color: lightgreen;
}

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>How to change Hamburger
      Toggler color in Bootstrap ?</title>
  
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet"
          href=
    <style>
        /* Set the border color */
          
        .custom-toggler.navbar-toggler {
            border-color: lightgreen;
        }
        /* Setting the stroke to green using rgb values (0, 128, 0) */
          
        .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(0, 128, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
        }
    </style>
</head>
  
<body>
    <nav class="navbar navbar-dark bg-dark">
        <a href="/" class="navbar-brand">Custom Toggler</a>
        <button class="navbar-toggler ml-auto custom-toggler" 
                type="button" 
                data-toggle="collapse" 
                data-target="#nav3">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="nav3">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
        </div>
    </nav>
  
    <div class="container">
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>How to change Hamburger Toggler color in Bootstrap ?</b>
        <p>The above togglers use the a custom classe for the toggler.</p>
    </div>
  
    <script src=
  </script>
    <script src=
  </script>
    <script src=
  </script>
</body>
  
</html>

chevron_right


Output:

custom-class



My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.