How to change Hamburger Toggler color in Bootstrap ?

Last Updated : 12 Sep, 2024

Changing the Hamburger Toggler color in Bootstrap refers to customizing the color of the toggle button icon used in responsive navigation menus. This involves altering the default styles of the toggler using CSS to match the design requirements, enhancing the visual appearance and brand consistency.

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

Table of Content

Using the inbuilt color classes
Creating a custom class for the toggler

Method 1: Using the inbuilt color classes

Using Bootstrap's inbuilt color classes, you can change the Hamburger Toggler color by adding utility classes like text-primary, text-danger, or text-dark to the toggler element. These classes apply predefined color styles directly to the toggler icon.

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

Note: The naming seems a little backwards. Shouldn't it be .navbar-dark to make the content darker and .navbar-light to make it lighter? The -dark and -light represent the color of the background, not of the content on the navbar.

Example: In this example we demonstrates Bootstrap's light and dark navbar togglers. It uses Bootstrap's default styling for the hamburger toggler icons and includes links for both light and dark navigation bars.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to change Hamburger Toggler color in Bootstrap ?
    </title>

    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</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=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
    </script>
</body>

</html>

Output: inbuilt

Method 2: Creating a custom class for the toggler

Creating a custom class for the toggler involves defining your own CSS styles for the Hamburger Toggler button. By adding a custom class to the toggler element, you can specify colors, sizes, and other properties to match your design preferences.

/* 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.

html

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

Example: In this example we demonstrates customizing the Bootstrap hamburger toggler. It changes the toggler's border color to light green and uses an SVG image to set the stroke color of the icon to green.

html

<!DOCTYPE html>
<html>

<head>
    <title>How to change Hamburger
        Toggler color in Bootstrap ?</title>

    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <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 classes for the toggler.</p>
    </div>

    <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
    </script>
</body>

</html>