Hello,
How do I change the colour of the bars on the navbar-toggler-icon? I see its an svg image but I can see no way of adjusting the colours.
Can anyone help?
Thanks
Hello,
How do I change the colour of the bars on the navbar-toggler-icon? I see its an svg image but I can see no way of adjusting the colours.
Can anyone help?
Thanks
I'm using BS4 btw.
Hello kgbow,
I was hoping someone with more BSS experience would jump in but I am happy share what I know so far.
Working with a dark navbar, my problem was a dark icon which was barely visible. Here is how I changed it to white (or lighter color).
To make the hamburger icon light on a dark navbar: In upper right corner of interface, select Navbar > Options > Background: Default / Text Color: White
I believe you could make similar adjustments if you require a dark icon on light color navbar.
There may be easier ways to change to a custom color, but I have not found that. You could consider creating a custom hamburger icon in a graphics editor, import the .png or .svg image into your BSS image folder and replace the current Bg Image. I just tried that and it seems to work okay in a test environment.
Hopefully one of the BSS experts will jump in with better advice, but either way, let me know how you make out with this.
The code for the navbar-toggler-icon (so you don't have to type it) is:-
url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(216,24,210, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
You just change the colour of the rgba() part to whatever you want
![In case it helps anyone, the CSS (as suggested by @Windy above) for a white hamburger menu will look like this][1]
I usually just replace the Bootstrap SVG graphic with an icon from font awesome or material icons.