Color of "Standard Hamburger" Menu Icon

just add the classes in this case as @Eldar mentioned. first you open the class manager and click the “+” sign, now instead of typing a new class, open the subclass menu below and choose the option you need. for example Special Navigation Close Symbol will change the color of the menu close symbol, the Toggle Navigation Menu Symbol will style the hamburger menu etc…

Still the colour of the icon cannot be changed …:frowning:

can you try emptying the browser caches? if you are using safari, activate the developer options in safari preferences and then you can Empty Caches thru the develop menu. after this operation reopen the blocs file in browser. I am trying to replicate your problem but all my tests are OK. hope this will fix you problem

Did you try to make the change on the mobile preview then looked on the computer?
Maybe the problem is here. Change the class manager while on the computer preview, not on the mobile preview.
Let me know if it’s good now.

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

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 :sunglasses:

menu1

Result in browser
menu3

4 Likes

Thanks! (Y)

Nice tip, appreciated!

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

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

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

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.

1 Like

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

@KBConcepts

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

MDS

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.

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.
11.
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”!

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.

Hope that helps

2 Likes

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:
26

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

1 Like

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

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!

Here you go: Easy Burger v1.2 Update