Change Colour Of Hamburger Menu Bars


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?


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.

1 Like


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=''%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

1 Like

![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.