Change Hamburger Icon


#22

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


#23

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 ?
tom


#24

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


#25

@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.
https://battlecreeksteelheaders.com/index.html


#26

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


#27

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


#28

Hi @casey1823

Try to replace with this:

url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 20 20’ xmlns=‘http://www.w3.org/2000/svg’%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


#29

Yup, thank you.

Casey


#30

My pleasure.

MDS