twbs
--bs-navbar-toggler-icon-bg variable not set for .navbar-icon-toggler in light mode
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
I ran into a problem with the navbar-toggler-icon. For me it was not visible in regular/light mode, but it did become visible in dark mode. In my case I had the .navbar-toggler in a div in my header tag, separate from the .navbar in my header.
When inspecting _navbar.scss I discovered that --#{$prefix}navbar-toggler-icon-bg variable is only set in the .navbar selector, but not in the .navbar-toggler-icon selector.
Then for the dark mode it is set in both the .navbar-dark, .navbar[data-bs-theme="dark"] and also in .navbar-toggler-icon if color-mode is dark.
The latter adds the variable to the .navbar-toggler-icon, making it visible when in dark mode in my case (though the dark and light mode styling does not match).
When I added the following variable to the .navbar-toggler-icon selector it also worked in light mode:
.navbar-toggler-icon {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
}
Reduced test cases
Here's a working example of the navbar-toggler with and without a navbar/navbar-dark wrapper:
https://codepen.io/Jos-van-Leeuwen/pen/OJqgqBb
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.2
I think the variable should just be moved,
to:
:root,
[data-bs-theme=light] {
--bs-navbar-toggler-icon-bg: 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");
}
from:
.navbar {
--bs-navbar-toggler-icon-bg: 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");
}
This is an example of poor repetition because the lines of code are too long.
.navbar-dark,
.navbar[data-bs-theme=dark] {
--bs-navbar-color: rgba(255, 255, 255, 0.55);
--bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
--bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
--bs-navbar-active-color: #fff;
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .navbar-toggler-icon {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
