Change Hamburger Icon

[MDS]

Hi @casey1823

I did not want to confuse @tom2 with the svg color change… yet

Indeed, page header code is not retained with adding the bloc to the library nor with the page template which does actually make sense because you would then probably override any existing code you would have set before in the page settings. But only @Norm can clarify.

A workaround is to simply copy paste the code directly in the bloc before adding it to the library. Therefore, once you use your custom bloc, you only need to paste back the code in the page settings.

MDS

[casey1823]

Ok that seem easy enough.

Casey

[Blocs_User]

Hi @tom2,

Good morning, sorry I seemed to miss or overlook your reply and the notification. It looks like @MDS stepped in and has you headed in the right direction to make your adjustments for Blocs 3.

[tom2]

Hi @Blocs_User no problem. Thanks for your answer …
tom

[tom2]

Hi @MDS you did not want to confuse me ??? I think this is okay
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 ?
tom

[MDS]

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 - #3 by KBConcepts

You will need to change the view box specifics.

MDS

[casey1823]

@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.

Thanks
Casey

Here’s a live version.

Battle Creek Steelheaders

[MDS]

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 ?

MDS

[casey1823]

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?

Casey

[MDS]

Hi @casey1823

Try to replace with this:

url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 20 20’ xmlns=‘SVG namespace’%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”)

Result:

Let me know if it works.

MDS

[casey1823]

Yup, thank you.

Casey

[MDS]

My pleasure.

MDS

[tom2]

Hi…
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

[tom2]

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

[MDS]

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?

MDS

[tom2]

Hi @MDS
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
tom

[MDS]

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 ?

Thanks

MDS

[casey1823]

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

casey

[tom2]

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
tom

[casey1823]

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.

Casey