Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark Navbar's Icon malformed data #68

Open
Virus5600 opened this issue Jul 19, 2023 · 3 comments
Open

Dark Navbar's Icon malformed data #68

Virus5600 opened this issue Jul 19, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@Virus5600
Copy link

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

@Carl-Hugo Carl-Hugo added the bug Something isn't working label Jul 20, 2023
@Carl-Hugo
Copy link
Member

Thanks for reporting this bug @Virus5600
I'll have to dig into this and understand what part of the process encodes the SVG images.

@mikemandev
Copy link

Where you modified thi part? in your project or node_modules?

@Virus5600
Copy link
Author

Where you modified thi part? in your project or node_modules?

Came back to my project and tried finding the change and saw it in my project so yeah, overwrote it in my projects.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants