Coloring the toggle - solved

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. :wink:

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.

17

MDS

Thx, but doesn’t work at all. I cannot add ID for a Nav Toggle like it was in your instruction

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

Here is your solution @Liberius. for the horizontal circles

I’ve heard this discussed since version 2. Just curious why can this not be easier to implement in Blocs?

Yes, this is correct …
Or one thread with the correct solution and the code

In that thread I did give some clues to how you can get the code yourself regardless of the Toggle style you are using. Its all in the style sheets, and the inspector just makes it easier to find, then its copy, paste and modify. simple.

Hi @PeteSharp
ok, so you mean the thing with the inspector ? So I use your code and only change the, for example beginning ( menu-icon-circles ) ? Or you mean copy the complete code I see in the inspector for the menu?

I’ll post a demo tomorrow to show you @tom2 it’s almost midnight here .

I had the same question and I think it’s because it’s based on bootstrap. But I think the number of options can be bigger. The same as a number of blocs… Changing code for the color of one button is a little bit too much.

Hi @PeteSharp
I figured it out…thanks a lot. :+1:

1 Like