How do you change the mobile Hamburger background color menu and the horizontal lines? Example Green background, the horizontal lines black.
Does anyone know the Classes that control these setting?
Do you make a custom class, if so what Element do you choose?
Hi @KBConcepts
You can add the following code to page settings:
<style>
#nav-toggle .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='green' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
background-color: black;
}
</style>
Green Hamburger with black BG.bloc (200.7 KB)
MDS
1 Like
Thank you @MDS for the quick reply. 
I was looking everywhere in the class section including subclasses, but could not find anything.
I really didn’t want to mess with the edit the HTML, but that is what I have to do so be it.
You’re welcome.
MDS
Changing the background colour is pretty easy. Just select the menu toggle and create a custom class. Then change the colour background to whatever you want.
2 Likes
Yeah @Flashman that is easy if you know it. I do now.
Using the Class Manager how do you change the bars?
Using the class manager I don’t think you can at this stage and it requires code in the header. I seem to recall the colours had to be done in a certain way so they work in Firefox as well.
It’s a basic limitation of Bootstrap 4 that limits you to light or dark and yes pretty much every Blocs user is looking for an easier solution.
1 Like
The easiest way is to use an icon instead of the default Bootstrap 4 svg. Then you can style it the same way that you could with Blocs 2/Bootstrap 3.
You may want to check some of my previous post replies.
MDS
So @MDS are you saying using Blocs 2x the style can change the background and the color of the horizontal bars?
I will gladly look at your prevision post. To save time what would the topic be under?
Hi @KBConcepts
That’s correct, Blocs 2 use bootstrap 3 and Blocs 3 use bootstrap 4 which uses a svg for the mobile icon.
Here’s a way you could change colors of the mobile menu in Blocs 2. (which doesn’t work in Blocs 3)
I don’t think we can change the menu icon svg in Blocs 3 today, but maybe we will at some point.
Cheers
1 Like
Hi @KBConcepts
Not sure I understand your question…
In Blocs 2 you could style the hamburger color and background (it was an icon).
In Blocs 3, the hamburger has become an svg image file (like @Jakerlund just mentioned). This is why many people have difficulties modifying it. And I must say it is not the easiest. But some of the code provided works. For ease of reference on Blocs 3 changes:
https://help.blocsapp.com/knowledge-base/change-toggle-navigation-symbol-colour/
You can look at the following post I replied to Coloring the toggle - solved
So if you want to style the hamburger in Blocs 3, another way is to build your own navigation using an icon. Then there will be a little more work but that is the cost of freedom 
MDS
2 Likes
Thank you for taking the time to answer this?
So helpful thank you
@MDS I looked up Bootstrap 4 Hamburger Toggle Color Choices, but cannot locate a link showing the codes for the color that can be used. I even tried SVG Color Codes and came up with nothing. I’m sure all you professional web builders know what I’m asking for.
Hi @KBConcepts
You can use any color. I selected green and black as it was your original request.
Simply use rgba code for the colors you wish to choose. In the following code, I have used rgba (green and black) simply replace the values to the colors you wish to use. For the bars of the svg, you change the stroke color and for the background is appears at the end of the coee.
<style>
#nav-toggle .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,153,102,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
background-color: rgba(0,0,0,1);
}
</style>
The updated file:
Green Hamburger with black RGBA.bloc (204.0 KB)
MDS
3 Likes
I fell like I’m a student learning basic stuff, but I have to begin somewhere. 
Thanks again @MDS for making this clear and sharing the bloc file.
I did find something the would give me the color values.
I’m sure there are better ones, but this will work for now.