Nav toogle color

[Liberius]

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"); }

Screenshot

[tom2]

Hi @Liberius

You can choose on the left side Nav Bar and then on the right side the “dark theme”, But this is not really white ( in my opinion )

Or try this code:

<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='rgba(255,255,255,1.0)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

background-color: rgba(0,0,0,0);
 
 }
</style>

tom

[Liberius]

I was trying, but didn’t apply. The problem was here:

Coloring the toggle - solved - #18 by Liberius

[tom2]

Okay, you need also another icon ? I dont know this. The Code works for me with the standard hamburger menu. Don’t set an Id or anything else. Just put the code in the settings …
Sorry

[Liberius]

I would like to apply another icon, but it seems that in this case we have to change the code… I wish I knew how. But the method I’ve described in other topic (link above) seem to work=)))

[tom2]

hope you will find a solution …
tom

[Liberius]

I hope so too. Thx a lot.

[PeteSharp]

@Liberius

but it seems that in this case we have to change the code

Yep, since BS4 its all SVG, so lots of fun.

Using the Inspector in Safari, it shows this code for the horizontal dots.

You will need to adjust the RGBa values for colouring.

.navbar-light .menu-icon-circles .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 fill='rgba(0, 0, 0, 0.5)' d='M15.5,12A3.5,3.5,0,1,1,12,15.5,3.5,3.5,0,0,1,15.5,12Zm11,0A3.5,3.5,0,1,1,23,15.5,3.5,3.5,0,0,1,26.5,12Zm-22,0A3.5,3.5,0,1,1,1,15.5,3.5,3.5,0,0,1,4.5,12Z'/%3E%3C/svg%3E");
}

The Safari Inspector is excellent. If you don’t have it activates. Safari → Preferences → Advanced → Tick the develop checkbox at the bottom. You will have a new dropdown menu appear called Developer with a bunch of useful tools.

[Liberius]

thx a lot. it works