how to collapse navbar onclick (bootstrap5)

Question

I am asking for a way to collapse this nav-bar after link click rather than javascript event listener or data-bs-toggle and data-bs-target both methods answered in that article ( article link ) are not working with my code.

here is my code:

<header class="header-nav" id="home">
      <nav class="navbar navbar-expand-lg custom-nav fixed-top">
        <div class="container-fluid">
          <a id="brand" href="#"><span>C</span> Solutions</a>
          <button
            class="navbtn"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span><i class="fas fa-bars burger-menu"></i></span>
          </button>
          <div
            class="collapse navbar-collapse justify-content-between"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav m-auto mb-2 mb-lg-0 text-center">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#home"
                  >Home</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">about us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#services">services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">why choose us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">careers</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#our-clients">our clients</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">contact us</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <button class="btn btn-primary">request a quote</button>
            </ul>
          </div>
        </div>
      </nav>
    </header>

can any one help please?

Answer 1

Your code works, you only forgot to add the boostrap.bundle.min.js in your index.html.

Add this in your index.html. that's all!

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

And you don't need to add extra js code. Only add this in your index.html and it should work.