How Can I Change the Bootstrap 4 Navbar Hamburger Icon Color?

Changing Bootstrap 4 Navbar Button Icon Color

Bootstrap 4 features a hamburger menu icon for smaller screen sizes, which can be seen in the following code:

<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">
    <span class="navbar-toggler-icon"></span>
</button>

This icon is displayed as either white on dark backgrounds or dark on light backgrounds. However, you may wish to adjust its color to suit your design vision.

Customizing the Icon

To customize the icon's color, Bootstrap 4 uses an SVG background-image. Different SVGs are used based on the navbar background color.

• .navbar-light .navbar-toggler-icon: Black icon with 50% opacity for light backgrounds
• .navbar-dark .navbar-toggler-icon: White icon with 50% opacity for dark backgrounds

To change the icon's color to pink, for example, use the following CSS:

.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);
} 

Alternative Approaches

An alternative to customizing the icon is to use a different icon library, such as Font Awesome. This provides more flexibility and control over the icon's appearance.

The above is the detailed content of How Can I Change the Bootstrap 4 Navbar Hamburger Icon Color?. For more information, please follow other related articles on the PHP Chinese website!