Hey all,
is there a way to style the mobile toggler icon? Like … change the icon or the color?
Cheers,
Fynn
IMO, Bootstrap makes this needlessly complicated, but there are some easy solutions.
First, you should understand that the navbar-toggler-icon (hamburger menu) in Bootstrap uses an SVG background-image that is generated by code in the CSS.
Built into Bootstrap, there are 2 “versions” of the toggler icon image. One for a light navbar, and one for a dark. When you drag a new Navbar component on to a page, it will automatically have the class navbar-light, and the toggler will have a kind of dark grayish border and hamburger menu.
If you change the text color of the Navbar to white via the Options panel, the class on the Navbar will change from navbar-light to navbar-dark. Now if you change the background color of the navbar to something darker, you’ll notice that the hamburger menu and outline around it has changed from dark gray to a very light gray (almost white.)
The color of the border around the hamburger menu is easy to change, because it’s an ordinary CSS border. You can highlight it and change it via the Appearance panel > Border options, or by changing the rgba values of the CSS class itself, like so…
.navbar { --bs-navbar-toggler-border-color*:* rgba(0, 0, 0, 0.1);}
Modify the rgba values as you desire.
But what if you want a hamburger menu color that’s something other than dark gray or white? Well, you can change the color of the hamburger menu by altering the SVG that generates. Add the following to your custom CSS stylesheet…
.navbar {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,0,0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
This would create a red hamburger icon. You can see the new value for the menu color (circled in yellow) in this image of the code.
Just click on the red swatch and change your menu to whatever color you want.
NOW, if you want a SIMPLE way to change not only the color of the hamburger menu but the look itself, you can just delete the .navbar-toggler-icon span (highlighted in blue below). NOTE: Leave the the other span as it’s an invisible span with text that says “Toggle navigation” for people who use screen readers.
Then drag an Icon component into the Navbar Toggle component, double-click it and set it to whatever icon you want. You can then change its color, size and other attributes the same as you’d change any other icon in BSS (example:)
Hope this helps.
2 Likes
Fantastic. That’s very helpful indeed. Thank you!