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.



I use this code ( screenshot )

to put the text to the hamburger menu …but now I use also the content area in the navbar …and on mobile I use the visibility option to remove the content area because of the size of the header …or not looks good when the content area is below the logo…
then the text don’t stay at the hamburger menu …is there a way to"fix" it to the menu ??!
thanks tom


Hi @Blocs_User
do you have an idea ? Or anyone else with coding knowledge :smile:
thanks a lot


Hi @tom2

Would you have some screenshots or a file I could look at to better understand what you’re trying to achieve and perhaps assist you?



thanks for your answer …when I use this code it works perfect when I have no icons in the nav bar …but when I have icons it doesn’t work …for
exampe in desktop view it is okay

but on mobile it doesn’t work …

thanks for your help


Hi @tom2

While I understand you want “Menu” to remain above the social icons, should the social icons on mobile remain below as shown ? Can you send me your example file so I can modify it ?




Just wondering if you are using one of the default menus with the social icons? These always place the social icons outside of the nav menu. (It creates a column for the icons) Once displayed on mobile the icons are below the hamburger menu. If you want the icons to appear in the menu (icons not showing until you click the menu on mobile) you have to use a regular nav menu (no icons). Set the source to none and then add a menu item. Delete the text link and add the icon. This will keep the icon in the nav menu. Hope this helps



Hi @MDS and @casey1823
my wish is that the text menu still is at the hamburger symbol …in every view …mobil or desktop …but when I change the view the menu text change the position …and yes …this is a default menu …
I send you the file @MDS
thanks a lot for your time and help


If you want the menu to appear as hamburg (mobile) on all views you can set the mobile toggle to the desktop icon. Maybe I’m not understanding your wishes. This will keep the hamburg menu on all devices.




Hi @casey1823
yes, I know that…sorry my English is not so good :blush:
I want on every size a hamburger menu …and over the hamburger menu is a text called “menu”. That works fine with the code I use, but since I also use the content area and the hamburger menu it don´t work like I have done it before … The text “menu” don’t stay over the hamburger menu …see screenshot in the last post …
thanks for your time


Is this what you are looking for?



yes…something like that. but that I get to work. But when I switch on the content area in the nav bar my code does not work. How you do this inside blocs 3 ? Use code ? Or use a sag and replace the original file ? or something like this …