In older versions of Blocs there was a subclass to target the toggle symbol called “toggle navigation menu symbol”. This was .navbar-toggle .icon-bar . This is no longer in the list of special navigation classes for Blocs 3 (I have explored each one). I would like to change the color of the toggle symbol but this older class no longer seems to work. There is a class in the subclass menu for targeting the background of the toggle, but I can’t seem to change the color of the toggle symbol itself. Any ideas? I apologize if I am asking a question with an obvious answer…
Hi David @cnstnce228
A solution has been provided under this previous post thanks to @creative and @webplus:
You need to add the following code to the 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='red' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
margin-right: 25px;
}
</style>
To change the color modify stroke=‘red’ for example with either an RGB color or Hex color: stroke=‘rgba( 256,38 ,0 ,1)’ or hex color stroke=‘#FF2600’
@creative added a margin-right which you can adjust to your liking.
Make sure that the Toggle ID remains nav-toggle:
Below is a simple example:
Bloc 3 Hamburger Color.bloc (200.1 KB)
Just to note you will only see the change once previewed in Blocs or in browser.
MDS
PS: if you are satisfied do not forget to edit you post title with SOLVED
6 Likes
Thanks. It works. I need to keep on my reading…
Well…perhaps my enthusiasm was premature. Since it is possible to make the hamburger any color by inputting the hex code, I thought the code was working, but there are issues.
-
On a mac, using this code, the hamburger is only visible in Safari, Chrome and Opera - but not in Firefox. I tried it on a Macbook Pro and on an iMac desktop with both Sierra and High Sierra OS. The hamburger was invisible on both systems in Firefox. Is there a way to make it also visible in Firefox? Am I the only one experiencing this?
-
With this code it only seems to be possible to color the “normal” state - it is still not possible to color the “hover” state - in order to show a change when it is selected. Can this be enabled?
The reason that it is essential to be able to make the hamburger white (#FFFFFF) is because the grey color of the hamburger in Blocs 3 “dark mode” is too indistinct to be useful for my mobile projects. Measured with a color meter the color value of the hamburger in Blocs 3 is currently #AEAEAE:
Thanks for the help.
Hi @cnstnce228
I have modified the code and now you can see the hamburger in Firefox as well. I have been able to add the hover state which works in Safari, Chrome and Opera but for whatever reason hover is not working in Firefox. There are some issues that have been reported with the hamburger for Firefox on the net.
You can replace the original coding with the following (I have reverted to rgba instead of hex):
<style>
#nav-toggle .navbar-toggler-icon {
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(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
margin-right: 25px;
}
#nav-toggle .navbar-toggler-icon:hover {
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, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
margin-right: 25px;
}
</style>
This is as far as I can help for now.
Maybe @Creative and @webplus can help further as they originally provided the solution ?
MDS
1 Like
@mds thank you for all the hard work giving us this code for changing the menu color and hover state. It works great. I know you spent a lot of time helping with this one, the Blocs community really appreciates your expertise.
Merry Christmas,
Casey
1 Like
Thank you @Casey.
Not an expert here. I try to never give up and although it may be time consuming, I like to assist others and at the same time it does help me further too.
Your help is also much appreciated.
Merry X’Mas to you too.
MDS
1 Like
Thank you for your help, MDS! It is really useful. I am grateful - and deeply appreciative of this community.
My pleasure. 
Thanks for the tip, worked like a charm!
Where should I enter the code exactly? I open page settings but I don’t know where to enter the code.
Click on the Add Code button and put it in the Header area.
I was trying to add the code I’ve been sent from Eldar to change the color of the toggle bar icon, but it seems it doesn’t work or I do it wrong. Somebody pls give me some instructions to make it properly. Just need white icon on mobilу devices… White one!!! And it cannot be applied with a hero bloc!!! Also cannot change the ID of the toggle to make classes work.
The code I used in code editor:
#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='white' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24](http://www.w3.org/2000/svg)'/%3E%3C/svg%3E"); }
Hi @Liberius
Reason why it is not working is that you have not chosen a regular Hamburger with bars but the “circles horizontal” which is a different image/svg.
Perhaps if you simply set the appearance of the navbar to dark (instead of light) you will get lighter coloured circles which may be sufficient for your need.
MDS
No need to do add any ID at this stage. As mentioned you cannot use the previous mentioned code as you are using the circles and not the regular “hamburger” with bars.
Just click on the connected 3 dots to reveal the side popup and choose Navigation:
Then choose dark theme instead of light:
You will then have your toggle icon in a lighter colour:
MDS
Yeeeeha, working!!! The code should be like on the pic below and inserted into Project Header:
I’ve putted stroke-width=‘3’ to make it look a little bit bolder.
Next we need to put ID nav-toggle for Nav Bar (it was impossible to put custom ID for Nav Toggle):
And finally for a Nav Toggle we need to make custom class navbar-toogler-icon:
And voila - it works even if we choose Circles Horizontal as a markers of menu:
But the changes will be visible only in preview mode…
Thx to @MDS
PS I would be very appreciated if you could give us some code for other types of symbols
Thx a lot, found out how to apply your code. The problem was in adding ID for a Nav Toggle (it’s impossible and I don’t know why). Renamed ID of Nav Bar and added style for a Nav Toggle. It seems it works… I wish it would be possible to change the type the icon to vertical circles, but only you can help us to find a code of this SVG=)))
Nice to have two threads running about the same thing 
Here is your solution @Liberius. for the horizontal circles