skip to Main Content

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


  1. 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. 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