Color of "Standard Hamburger" Menu Icon

[sinusoid]

I too have been down this road, did not find a way to change the color of the hamburger

[Jakerlund]

Hi guys,

If it’s the color of the actual bars in the burger menu then this works.
Just open the Class Manager, click the + and in the Subclass Lib choose “Toggle Navigation Menu Symbol”
And change the background color.

I hope this helps

Result in browser

[sinusoid]

Thanks! (Y)

[Flix]

Nice tip, appreciated!

[durbanad]

With Blocs 3 I’m having a problem with the menu hamburger. Originally it was white as below.

For some reason, in the settings, I can’t get it back to white as it used to be. What am I missing, please?

Many thanks.

Grant

[webplus]

In Blocs 3 you only have a dark and light mode until now.

Choosing a freely availble color is already discussed in this thread:

Color changing Nav toggle in B3

@RME, you have to add this to the .navbar-toggler-icon class. Add the below to the “Add Code” section in the page settings. [49] You then have to change the color to the desired color [49]

[durbanad]

Webplus, this makes a huge difference. Thanks for the help. This is all one needs to go forward on a dark background. For the life of me, I could not find.

[KBConcepts]

@Jakerlund
Just to be clear this no longer works like this because of Bootstrap 4?

[MDS]

@KBConcepts

Just the opposite - this works for Bootstrap 4. (B3 in the title stands for Blocs 3).

MDS

[KBConcepts]

Sorry, @MDS I should have been more clear I was referring to @Jakerlund reply about “Toggle Navigation Menu System”. I looked everywhere in Custom Class and SubClass for “navbar-toggle .icon-bar” other than giving me a warning that my syntax was wrong it can be found.

[peka]

Hi - I’m now working with Blocs 3.2.1 and I can’t change the color of hamburger menu icon. I’m in small breakpoint view and the Toggle is visible.
.
How I now can open the “nav-toggle” and change the color of Hamburg icon to white? In the Subclass Lib Ican’t find “nav-toggle”!

[pixelwork]

This is a frequent question since v.3 of blocs.
According to @Norm Bootstrap 4 uses a svg as symbol and this is not possible to change more than choosing either a dark or light theme as above in this thread.
@mds shared a nice code wich enables you to select any color.

Hamburger Menu and horizontal lines changes

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='…

Hope that helps

[peka]

Thanks pixelwork. I put the code inside the header. With value as this:

#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,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); background-color: rgba(255,255,255,1); }

The Hamburger menu looks like this:

How to set the RGB values, that there would be only three white lines on black background?

[pixelwork]

Well, you would need to put your colours individually into the code before pasting this into the header.
A little fiddely but works

[smileBeda]

In 2021 this class seems to be non-existing.
The entire subclass menu has no “toggle” or similar class.

How would we change that Bootstrap Menu Toggle icon nowadays with Blocsapp 4?

Thanks!

[Jerry]

@smileBeda

How would we change that Bootstrap Menu

Here you go: Easy Burger v1.2 Update

[smileBeda]

Hello @Jerry - thanks.
But, are you saying I need to spend even more money to just be able to do something that in HTML takes 2 minutes?

I am not sure if I got you right but it seems the update you suggest is part of this add-on Easy Burger | Blocs Store

I just send 150 USD for an app that promised to make all these things simpler, are you saying I will need to buy an add-on to customise the Burger?
At this pace, I am back at manual HTML and CSS faster than I would like to, because it is surely not the point to buy add-ons when I can do this myself. I was hoping this app would make exactly these things easy.

Looks like I will stick to my old way and not use Builder(s)(?)

Sorry if I misunderstand…

[Jerry]

@smileBeda

But, are you saying I need to spend even more money to just be able to do something that in HTML takes 2 minutes?

If you can do this in 2 minutes in HTML there’s no need to spend 25 bucks. Just add the code and you’re done.

[smileBeda]

That’s absolutely correct.

However I bought the app in the believe it will make these things exactly part of a UI.

Well, it’s as it is and I’ll have to evaluate once I’m done with the first project if these limits are reasonable and/or perhaps worth purchasing a few addons…

Thanks for the answer

[Whittfield]

Hi again,

Blocs is great app but of course nothing is perfect. I agree with you on this particular feature. Easy Burger is an excellent upgrade, but Bloc’s could still use a simple color setting here.

I wouldn’t throw out the software over this, but you definitely aren’t wrong about this particular shortcoming. There’s a long list of things Blocs gets’ perfect and other packages do not. And many are much more impactful than this one… but again it’s still a fair statement.

P.S. I’m commenting because I think your questions are good ones that deserve answers. It’s the other great thing about Blocs, these conversations actually end up shaping the future of the software!