Namaste!

User Interface Developer

How-to 1 min read

Change Bootstrap 5 Navbar Toggler color

Published on November 27, 2024

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

About Deepak

Professionally a UI Developer • A Freetime Blogger at Techplayce and here • geek • experimental Chef • always on the move • UI/UX & Wordpress delights me!

View all posts by Deepak →