Change Hamburger Icon


Hi @Blocs_User no problem. Thanks for your answer …


Hi @MDS you did not want to confuse me ??? I think this is okay :smile: :smile:
But I have another question… In blocs2 there was a class called nabber-toggle .icon-bar ( choose from the dropdown menu ) With this class I could change the with of the hamburger menu …But I don’t find that class in blocs 3 …
When I use the nabber-toggler-icon class I can’t change the with of the menu , it change only the position …

Any ideas for me ?


Hi @Tom2

Blocs 3 is based on Bootstrap 4 and as a consequence the hamburger icon is now a svg file. If you want to change the size or/and color of the hamburger then you need to modify the svg data. There exists already a number of posts in the forum that provide the necessary information regarding the svg and how to modify it.

For instance: Hamburger Menu and horizontal lines changes

You will need to change the view box specifics.



@MDS I’ve been playing around with your examples of adding the word menu and toggle color. I did look through the hamburg code and was wondering how/where I could get the info on changing the svg hamburg icon. My version seems like a two column hamburg would look good.


Here’s a live version.


Hi @casey1823

I am not sure what you mean by a two column hamburger would look good. Can you clarify ?

Do you want it to be smaller ?



No I can change the size but your code uses a standard 3 line icon. Is there a way to use a 2 line icon or configure a different one?



Hi @casey1823

Try to replace with this:

url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 20 20’ xmlns=‘’%3E%3Cpath stroke=‘rgba(0, 0, 0, 1)’ stroke-width=‘2’ stroke-linecap=‘square’ stroke-miterlimit=‘1’ d=‘M4 7h22M4 15h22M4 23h22’/%3E%3C/svg%3E”)


Let me know if it works.



Yup, thank you.



My pleasure.