Color of "Standard Hamburger" Menu Icon

[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!

[PeteSharp]

I agree. Easy Burger came about initially to solve this in an easy way, its original scope was to just change the toggle colours. It does way more now. But there will no doubt be cases, where people do not want to replace the standard toggle with an FA icon, but want to (and just as easily) set the colouring.

[Norm]

This is one of the shortcomings of Blocs, but it’s mainly this way due to the way bootstrap integrates the menu icon as an svg in the css.

One other alternative is to make your own Bric to manage this, everything you need to make Brics is completely free and comes with Blocs.

Developer Docs

[smileBeda]

Hello @Norm, @PeteSharp, @Whittfield, thanks so much for your all inputs, and nice to meet you all. I am sure we are going to have some fun here
Thanks for indulging me.

---

I’ll simply replace the SVG with some custom SVG once the theme is exported, and I will check-out these custom Brics, that I think can help me resolve another question I had which was already answered here in the forum as well, about custom content to be reused.

---

Thanks all and see you elsewhere in the forums.
BTW I did only not reply sooner because of some limit about posts/replies in the forum for new users, so I had to wait

I appreciate this forum is very active, inclusive has a founder replying, it is something unique and reassuring that it is an actively and proudly maintained App where the very founder comes down to the peasants to give input!

[CD2021]

Not anymore in Blocs 4…how to do in Blocs 4?

[Jerry]

I don’t think you can do this without a bit of styling anymore. To simply change the color of the bars something like this should work:

<style>
.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,214,179, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important;
}
</style>

Just change the rgba to your preferred color and opacity. For any other fancy options, @PeteSharp’s Easy Burger is your best bet.