Answered
Style bootstrap toggler icon colour
How do I style the opacity and colour of the bootstrap navbar toggler icon?
I have for now created a workaround by creating a new rule in my site css (.button) and giving it a different colour background to make it more prominent. I created my own "hamburger" image and tried to add that to the .button style but without success. Suggestions on that would be welcome!
As an exercise I changed colour of the toggler icon as follows.
.navbar-light .navbar-toggler {
border-color: rgba(49, 222, 54, 0.3);
}
.navbar-light .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(49,222,54, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
This is the result
The following is probably too much information, but I'll put it there just in case.
- don't touch the original Bootstrap files
- create a new style sheet called styles.css or similar
- load styles.css after loading bootstrap.css or similar
- if an overriding style rule does not work, add !important
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
AdChoices