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.
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:
<!DOCTYPE html> < html >
< head >
< title >
How to change Hamburger Toggler color in Bootstrap ?
</ title >
<!-- Include Bootstrap CSS -->
< link rel="stylesheet"
href=
</ 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=
</ script >
< script src=
</ script >
< script src=
</ script >
</ body >
</ html >
|
Output:
/* 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.
/* 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=
< 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=
</ script >
< script src=
</ script >
< script src=
</ script >
</ body >
</ html >
|
Output: