Bootstrap 4 navbar toggle color change

The previous version of bootstrap which is 3.3.7 was quite easy to change navbar toggle icon color . but in the new version bootstrap 4 bring some changes .

if you want to change your toggle color need to override SVG icon value . because the navbar-toggler-icon in Bootstrap 4 uses an SVG background-image. There are two types of the toggler icon . 1# light navbar, and 2# dark navbar.

Use navbar-dark for white toggler on darker backgrounds
Use navbar-light for gray toggler on lighter backgrounds

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

if you want to change the color of the toggler button, you can customize the icon very easily. For example, here we set the HEX value to green (#008000). Notice the stroke='rgba(0, 0, 0, 0.5)' value by default in the SVG data:

Example

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#008000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-toggler { border-color: #008000; }

(Here i removed border color)

Bootstrap 4 navbar toggle color change

Related Post