How To Change The Hamburger Toggle Color In Bootstrap

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

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.

Hamburger Toggle color

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 content in the navigation bar:
.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.


Example

<!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">
    <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>
</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">
      BAJARANGI SOFT
    </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>


</body>

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


Syntax

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

Example
<!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">
    <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>
    <style>
        /* Set the border color */

        .custom-toggler.navbar-toggler {
            border-color: #1d37db;
        }
        /* 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: #d412b4">BAJARANGI SOFT</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>


</body>

</html>

Related Post