Skip to content

Dark Navbar's Icon malformed data #68

@Virus5600

Description

@Virus5600

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:
image

which then results to this:
image

Compared to what it should be like this:
image
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions