'how to fix my toggler button in the navbar

I am building a page that requires a double navbar and the toggler button is acting strange it is not collapsing and not even showing but when i click the position of the button a black box around the button appears and the navbar collapses and then expands very quickly this is the code I would appreciate any help

.nav-link {
    color: #6B6B6B;
    text-decoration: none;
}
.nav-link.arabic {
    color: #004D71;
    font-weight: bold;
}
.nav-link.blue {
    color: #004D71;
    font-weight: bold;
    font-size: large;
    text-decoration: none;
}
.nav-item.active {
    border-bottom: 8px solid #4B8E41;
    padding-bottom: 1%;
}
.brand {
    object-position: left center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>ADFD</title>
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="container-fluid" style="margin: 0; padding: 0;" data-toggle="animation" data-animation-reset="true"
    data-animation="slide-right">
    <nav class="navbar navbar-expand-md sticky-top">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbar" aria-expanded="true" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand d-none d-md-block" href="#">
        <img src="img/LOGO.svg" class="brand" style="width: 80%;">
      </a>
      <div class="navbar-collapse collapse d-flex flex-column w-100" id="navbar">
        <div class="align-self-end w-75">
          <ul class="navbar-nav mb-4">
            <li class="nav-item">
              <a class="nav-link ms-0 ms-md-1 ms-lg-5" href="#">Suppliers</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link ms-0 ms-md-1 ms-lg-5" href="#">Careers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link ms-0 ms-md-1 ms-lg-5">Procurement</a>
            </li>
            <li class="nav-item">
              <a class="nav-link ms-0 ms-md-1 ms-lg-5">Tenders</a>
            </li>
            <li class="nav-item text-nowrap">
              <a class="nav-link ms-0 ms-md-1 ms-lg-5">Contact us</a>
            </li>
            <li class="nav-item ms-auto me-3">
              <a class="nav-link arabic">العربي</a>
            </li>
          </ul>
        </div>
        <div class="align-self-center w-100">
          <ul class=" navbar-nav" style="border-top: 1px solid #C6C6C6; padding-top: 1%;">
            <li class="nav-item active me-0 me-md-1 me-lg-4">
              <a class="nav-link blue" href="#">About Us</a>
            </li>
            <li class="nav-item me-0 me-md-1 me-lg-4">
              <a class="nav-link blue">Operations</a>
            </li>
            <li class="nav-item me-0 me-md-1 me-lg-4">
              <a class="nav-link blue">Projects</a>
            </li>
            <li class="nav-item me-0 me-md-1 me-lg-4">
              <a class="nav-link blue">Beneficiary Countries</a>
            </li>
            <li class="nav-item me-0 me-md-1 me-lg-4">
              <a class="nav-link blue">Publications</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link"><img src="img/search-icon.svg"></a>
            </li>
            <li class="nav-item ms-3 me-3">
              <a class="nav-link"><img src="img/setting-icon.svg"></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <!--main image-->
  <img src="img/headline-picture.png" class="img-fluid">
  <!--Project ends here-->


  <!--scripts-->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>
htmlcssnavbarbootstrap-5


Solution 1:[1]

You may just need to over-ride some colour options using !important when adding your own style to .navbar-toggler.

.navbar-toggler, .navbar-toggler:visited, .navbar-toggler:focus {
    color: #777 !important;
    cursor: pointer;
}
.navbar-toggler:hover, .navbar-toggler:active {
    color: #333 !important;
    
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cutey from Cute Code

Related Questions