Color of "Standard Hamburger" Menu Icon


how can I change the color of the “Standard Hamburger” Menu Icon? The background is white, and the icon unfortunately is also white at the moment. How can I change the color to e.g. black for the icon?

I need to change the background of the menu or the font color, too. I cannot find the setting or the right class… :frowning:

Hope you can help me.


You can find all of the custom classes you need if you go to Class Manager, click ‘+’ and select the needed class in the subclass library. See the screenshot.



you can do it as @Eldar mentioned with classes or you can just select the navigation links while in DESKTOP view mode and add the color you wish from the sidebar. the 2nd option will add a dark color to the hamburger menu icon no matter which color you use for the navigation links if the nav bloc has a white background.

In Desktop Mode the icons have the correct colour (black), but when it is changing to smartphone mode the menu icon is still white.

Which class do I need to add and what settings have to be done ? I would appreciate detailed instructions. Thank you in advance

just add the classes in this case as @Eldar mentioned. first you open the class manager and click the “+” sign, now instead of typing a new class, open the subclass menu below and choose the option you need. for example Special Navigation Close Symbol will change the color of the menu close symbol, the Toggle Navigation Menu Symbol will style the hamburger menu etc…

Still the colour of the icon cannot be changed …:frowning:

can you try emptying the browser caches? if you are using safari, activate the developer options in safari preferences and then you can Empty Caches thru the develop menu. after this operation reopen the blocs file in browser. I am trying to replicate your problem but all my tests are OK. hope this will fix you problem

Did you try to make the change on the mobile preview then looked on the computer?
Maybe the problem is here. Change the class manager while on the computer preview, not on the mobile preview.
Let me know if it’s good now.

I too have been down this road, did not find a way to change the color of the hamburger

Hi guys,

If it’s the color of the actual bars in the burger menu then this works.
Just open the Class Manager, click the + and in the Subclass Lib choose “Toggle Navigation Menu Symbol”
And change the background color.

I hope this helps :sunglasses:


Result in browser


Thanks! (Y)

Nice tip, appreciated!

With Blocs 3 I’m having a problem with the menu hamburger. Originally it was white as below.

For some reason, in the settings, I can’t get it back to white as it used to be. What am I missing, please?

Many thanks.


In Blocs 3 you only have a dark and light mode until now.

Choosing a freely availble color is already discussed in this thread:

Webplus, this makes a huge difference. Thanks for the help. This is all one needs to go forward on a dark background. For the life of me, I could not find.

1 Like

Just to be clear this no longer works like this because of Bootstrap 4?


Just the opposite - this works for Bootstrap 4. (B3 in the title stands for Blocs 3).


Sorry, @MDS I should have been more clear I was referring to @Jakerlund reply about “Toggle Navigation Menu System”. I looked everywhere in Custom Class and SubClass for “navbar-toggle .icon-bar” other than giving me a warning that my syntax was wrong it can be found.

Hi - I’m now working with Blocs 3.2.1 and I can’t change the color of hamburger menu icon. I’m in small breakpoint view and the Toggle is visible.
How I now can open the “nav-toggle” and change the color of Hamburg icon to white? In the Subclass Lib Ican’t find “nav-toggle”!