I stumbled across a problem when trying to change the color of the navbar-toggler-icon in Bootstrap 5. I know there is two preset colors with "navbar-light" and "navbar-dark" but those don’t fit my theme so I tried changing the color to straight white. But it didn’t work, I then started googling to see if anyone had an solution but to my surprise none of the solutions I got from googling helped in my case. I don’t know why my icon is determent to not change since it’s working fine for everyone else. So now I’m reaching out here to see if any of you have a solution that works for me, since there probably is a thousand of posts like these but none applied in my case (at least those I tried I maybe dumb). Anyway here is my html:
<nav class="navbar navbar-expand-lg py-0 px-3 fixed-top">
<a class="navbar-brand" href="https://www.toleka.se/" target="_blank">
<img src="https://www.toleka.se/_siteimages/favicon.ico" alt="toleka-logo" width="40" height="40" />
</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav p-sm-4 p-md-0">
<li class="nav-item">
<a href="index.html" class="nav-link p-sm-3 fs-5 text-light">Hem</a>
</li>
<li class="nav-item dropdown">
<a href="html/industrisakerhet/industrisakerhet.html" class="nav-link p-sm-3 fs-5 text-light"> Industrisäkerhet </a>
</li>
<li class="nav-item">
<a href="html/trucksakerhet/trucksakerhet.html" class="nav-link p-sm-3 fs-5 text-light">Trucksäkerhet</a>
</li>
<li class="nav-item">
<a href="html/travers/travers.html" class="nav-link p-sm-3 fs-5 text-light">Travers</a>
</li>
<li class="nav-item">
<a href="html/logistikcenter/logistikcenter.html" class="nav-link p-sm-3 fs-5 text-light"> Logistikcenter </a>
</li>
<li class="nav-item">
<a href="html/informativa-losningar/informativa-losningar.html" class="nav-link p-sm-3 fs-5 text-light"> Informativa lösningar </a>
</li>
</ul>
</div>
</nav>
I’ve tried adding filters in my css file and straight into the element, both with !important, I’ve tried changing the border-color, outline-color, color, etc in my css with !important but nothing worked. But I don’t know maybe I’m dumb and it’s very simple, thanks anyway 🙂
2
Answers
It works for me… The frame turns black and the menu drops down.
Hard to say much more without the css.
You need to change
background-image
, more precisely, SVG’sstroke
property.See the snippet below.