Change Bootstrap 5 Navbar Toggler color

The newest version of Bootstrap uses a dataURI image instead of a CSS icon. And it becomes difficult if you want to animate it or want to change color.

Here’s the way to change the color if you need to.

Original Image:

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")

All you need to do is to replace the value present inside stroke

I am adding #FFC709 now

url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='#FFC709' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top