I’ve just been trying different things, but I’m not getting anywhere at the moment. I thought I’d be able to create a second bloc inside the global area and mess with visibility. It’s no problem adding a navigation bric separately, but that cannot be coloured. Likewise it’s no problem adding a navigation icon and colouring it, but that won’t show you the other pages when clicked.
I’ll keep experimenting…
Is there any thoughts on how to fix this? I see this problem with more than one site I’m working on.
I found this page while searching, but I’m not sure how we implement these options inside Blocs css - How can I change the Bootstrap 4 navbar button icon color? - Stack Overflow
I think the idea with a custom icon should be the best. Then adding to this icon the same custom attributes, which is now easyly possible in Blocs3. Will try this tomorrow and if I get it working, will posting the solution here
I think @Flashman hit the solution. Just adjust the css for the path stroke color for background-image. POW! Still works and now have custom color.
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
So in this example, change rgba(0,0,0,0.5) to some other translucent color.
Bill
BricsDesign
The reason is because it’s an SVG now so it can’t be styled the old way. I may add somthing in future for it but right now it’s dark and light.
Hi Norm, may you change the SVG for a dark background in a white SVG? The grey one is too inconspicuous.
Same problem here. Watching this.
I was just looking at the exported page code and while there is a graphic svg icon for the logo that could be changed via the img folder on the server I cannot see anything for the menu bar.
It mentions: <button id="nav-toggle" type="button" class="ui-navbar-toggler navbar-toggler border-0 p-0 menu-icon-thin-bars" data-toggle="collapse" data-target=".navbar-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
Then below it says: <span class="navbar-toggler-icon"></span>
It never actually points to a physical svg file we could simply substitute ourselves.
I working with a number of black and dark background websites so I assume one will have to roll back to Blocs 2 until a fix is found for this. Hoping for sooner than later 
You currently have a fixed choice between a dark or light menu. It’s just not variable beyond those options and no doubt everybody here agrees it needs more flexibility, however it would take an awful lot more than that to drag me back to Blocs 2.
@RME, you have to add this to the .navbar-toggler-icon class. Add the below to the “Add Code” section in the page settings.
You then have to change the color to the desired color
I also tried adding a icon, which replaces the actual icon, but I do not managed to drop the icon on the same place them the hamburger icon.
If someone wants to play with it, you habe to add the following attributes to an icon
Thanks to Webplus I found the solution. Thanks!
Please tell the rest of us!
Good idea.
It’s not quite what you were looking for but solved the problem I had as regards white on black background - Color of "Standard Hamburger" Menu Icon - #14 by durbanad.
Sorry! but it did help me.
Here’s a solution I found on Stack Overflow guys. You can just add this code snippet to your page settings. Just be sure to name your nav-toggle bric and use that id# first here (right before ‘.navbar-toggler-icon’)
Here’s the link to the article I found:
( css - How can I change the Bootstrap 4 navbar button icon color? - Stack Overflow )
Here’s the code snippet. (I named the bloc “nav-toggle” so changed it here):
#nav-toggle .navbar-toggler-icon {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 32 32’ xmlns=‘SVG namespace’%3E%3Cpath stroke=‘#0082C9’ stroke-width=‘3’ stroke-linecap=‘flat’ stroke-miterlimit=‘10’ d=‘M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
margin-right: 25px;
}
Here’s where I change the color: stroke=‘#0082C9’
And here’s a preview:
Awesome! Thanks.
