Ora

How do I change the color of the navbar toggler icon in Bootstrap?

Published in Bootstrap Navbar Customization 6 mins read

You can change the color of the Bootstrap navbar toggler icon by overriding its default SVG background-image using custom CSS, leveraging Bootstrap 5+ CSS variables, or dynamically adjusting it with JavaScript based on its expanded state.

The Bootstrap navbar toggler icon, commonly known as the "hamburger" icon, is rendered as an SVG background-image. To alter its color, you typically modify the stroke attribute within this SVG string.

Understanding the Navbar Toggler Icon Structure

Bootstrap's navbar toggler is a <button> element with the class .navbar-toggler, which contains a <span> element with the class .navbar-toggler-icon. The visual icon itself is generated by the background-image CSS property of the .navbar-toggler-icon span. This background-image is a URL-encoded SVG.

For instance, a typical dark icon SVG might look like this (simplified):

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

The key part to change for the icon's color is the stroke attribute within the path element of the SVG.

Methods to Change Navbar Toggler Icon Color

Here are the most effective ways to customize your Bootstrap navbar toggler icon's color.

1. Using Custom CSS to Override the SVG Background Image

This method involves creating a custom CSS rule that targets the .navbar-toggler-icon and replaces its background-image with a new SVG string containing your desired color.

Steps:

  1. Generate your SVG: Create or find an SVG icon with your desired color. For the standard Bootstrap icon, you'll modify the stroke property.
    • Example: To change the icon to a solid red (#ff0000), you'd set stroke='%23ff0000'. Remember to URL-encode the # symbol as %23.
  2. Apply Custom CSS: Place this custom CSS after Bootstrap's stylesheet to ensure it overrides the default.

Example:

To change the icon to a bright blue (#007bff):

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">My Brand</a>
        <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
    /* Custom CSS to override Bootstrap's default icon color */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23007bff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Optional: Change toggler border color */
    .navbar-toggler {
        border-color: rgba(0, 123, 255, 0.5); /* Blue border */
    }
</style>

Note: For more complex SVG icons or different shapes, you would replace the entire SVG data string. Online SVG URL encoders can be helpful for generating the data:image/svg+xml string.

2. Leveraging Bootstrap 5+ CSS Variables

In Bootstrap 5 and later versions, you can use CSS variables to streamline customization. The navbar toggler icon's background image is influenced by the --bs-navbar-toggler-icon-bg variable.

Steps:

  1. Target the Variable: Define the --bs-navbar-toggler-icon-bg variable within a selector that has higher specificity or globally.
  2. Provide New SVG: Assign your custom SVG string (with the desired stroke color) to this variable.

Example:

To change the icon to green (#28a745) for a navbar-light setup:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">My Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
    /* For Bootstrap 5+ */
    .navbar-light .navbar-toggler-icon {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2328a745' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Optional: Change toggler border color using a variable */
    .navbar-light .navbar-toggler {
        --bs-navbar-toggler-border-color: rgba(40, 167, 69, 0.5); /* Green border */
    }
</style>

Tip: If you're using navbar-dark, the default icon is white. You would target .navbar-dark .navbar-toggler-icon instead.

3. Dynamic Color Change with JavaScript

Sometimes you might want the toggler icon to change color based on its expanded or collapsed state (e.g., one color when the menu is closed, another when it's open). This requires JavaScript to detect the state and apply appropriate styling.

Steps:

  1. Define CSS Classes: Create two CSS rules, one for the default (collapsed) state and one for the expanded state, each with a different icon background-image.
  2. Add JavaScript Event Listener: Attach a click event listener to the .navbar-toggler button.
  3. Check aria-expanded: Inside the event listener, check the value of the aria-expanded attribute on the toggler button. Bootstrap automatically updates this attribute when the toggler is clicked.
  4. Toggle a Class: Based on the aria-expanded value, add or remove a specific class from the .navbar-toggler element.

Example:

Let's make the icon dark when collapsed and red when expanded.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">My Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
    /* Default (collapsed) state: Dark icon */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Expanded state: Red icon */
    .navbar-toggler.toggler-open .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ff0000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Optional: Change toggler border color dynamically */
    .navbar-toggler {
        border-color: rgba(0, 0, 0, 0.1);
    }
    .navbar-toggler.toggler-open {
        border-color: rgba(255, 0, 0, 0.5);
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const togglerButton = document.querySelector('.navbar-toggler');
        if (togglerButton) {
            togglerButton.addEventListener('click', function() {
                // Check the state of aria-expanded *after* Bootstrap has processed the click
                const isExpanded = this.getAttribute('aria-expanded') === 'true';

                if (isExpanded) {
                    this.classList.add('toggler-open');
                } else {
                    this.classList.remove('toggler-open');
                }
            });
        }
    });
</script>

Choosing the Right Method

Method Bootstrap Version Description Use Cases
Custom CSS (SVG) All Directly replaces the .navbar-toggler-icon's background-image property with a new SVG string. Best for static icon color changes.
CSS Variables Bootstrap 5+ Overrides the --bs-navbar-toggler-icon-bg CSS variable. Ideal for Bootstrap 5+ projects, maintains Bootstrap's variable-based theming.
JavaScript (Dynamic) All Adds/removes a CSS class based on the toggler's aria-expanded state, allowing for different open/closed icon colors. Perfect for interactive icon color changes based on menu state.

Important Considerations

  • Specificity: Ensure your custom CSS rules have higher specificity than Bootstrap's default styles. Placing your CSS after Bootstrap's stylesheet or using more specific selectors (e.g., body .navbar-toggler-icon) helps.
  • Accessibility: Choose icon colors that provide sufficient contrast against the navbar background for users with visual impairments. Test your color choices to ensure they are readable.
  • URL Encoding: When embedding SVG directly into CSS, make sure to URL-encode special characters like #, <, >, ", and spaces. Most online SVG to Data URI converters handle this automatically.
  • Bootstrap 4 vs. 5: While the core concept (modifying SVG background-image) remains the same, Bootstrap 5's introduction of CSS variables offers a cleaner approach for its version.

By using one of these methods, you can effectively customize the color of your Bootstrap navbar toggler icon to match your website's design.

← Previous Article
Why are my dahlias short?
Next Article →
Is Shamyl Hussain the Son of Talat Hussain?