Question 191657 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap navbar-toggler-icon wont change color

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 🙂

Tags:

2

Answers


  1. 0

    It works for me… The frame turns black and the menu drops down.
    Hard to say much more without the css.

    Login or Signup to reply.
  2. 0

    You need to change background-image, more precisely, SVG’s stroke property.

    See the snippet below.

    .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <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>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search