bootstrap-dark
bootstrap-dark copied to clipboard
Dark Navbar's Icon malformed data
When using the .navbar-dark .navbar-toggler-icon
, the icon is not showing. After looking through the styles, the main culprit is the malformed url()
value for the said class.
My temporary fix was to use this:
.navbar-dark .navbar-toggler-icon,
.navbar-themed .navbar-toggler-icon {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
The code was originally this:
.navbar-dark .navbar-toggler-icon,
.navbar-themed .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg width=30 height=30 viewBox=0 0 30 30%3e%3cpath stroke=rgba%28255, 255, 255, 0.5%29 stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d=M4 7h22M4 15h22M4 23h22/%3e%3c/svg%3e");
}
And as you can see, the missing single quotes created a malformed URL due to the spaces in between some values such as the d
attribute's value. Thus, when viewed in a new tab, this is the result:
which then results to this:
Compared to what it should be like this: