Coloring the toggle

Tips and Tricks
1

Hi,
there are lot of threads about coloring the toggle in the forum. Here same examples for a few menu ( thick Hamburger / Circles etc )

Choose the menu you wish, for example circles horizontal
45

Then copy the code for circles horizontal in the page settings and edit the RGBa ( 0, 0, 0, 1.0 )
In these examples the color is black and the opacity is 1.0

Hamburger Thick Bars

<style>
.navbar-light .menu-icon-thick-bars .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(0, 0, 0, 1.0)' stroke-width='5' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
</style>

Normal List

<style>
.navbar-light .menu-icon-normal-list .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, 1.0)' stroke-miterlimit='10' d='M3,8H5v2H3V8Zm0,6H5v2H3V14Zm0,6H5v2H3V20ZM7,8H27v2H7V8Zm0,6H27v2H7V14Zm0,6H27v2H7V20Z'/%3E%3C/svg%3E");
}
</style>

Menu Circles Horizontal

<style>
.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, 1.0)' 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");
}
</style>

Menu Circles Vert.

<style>
.navbar-light .menu-icon-circles-vert .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, 1.0)' d='M15.5,12A3.5,3.5,0,1,1,12,15.5,3.5,3.5,0,0,1,15.5,12Zm0-11A3.5,3.5,0,1,1,12,4.5,3.5,3.5,0,0,1,15.5,1Zm0,22A3.5,3.5,0,1,1,12,26.5,3.5,3.5,0,0,1,15.5,23Z'/%3E%3C/svg%3E");
}
</style>

Menu Two Bars

<style>
.navbar-light .menu-icon-two-bars .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(0, 0, 0, 0.5)' stroke-width='2' stroke-miterlimit='10' d='M4,10H26M4,20H26'/%3E%3C/svg%3E");
}
</style>

Thanks for the help @PeteSharp
Cheers Tom

1 Like