how to collapse navbar onclick (bootstrap5)-CodePudding

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  id="home">
      <nav >
        <div >
          <a id="brand" href="#"><span>C</span> Solutions</a>
          <button
            
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span><i ></i></span>
          </button>
          <div
            
            id="navbarSupportedContent"
          >
            <ul >
              <li >
                <a  aria-current="page" href="#home"
                  >Home</a
                >
              </li>
              <li >
                <a  href="#">about us</a>
              </li>
              <li >
                <a  href="#services">services</a>
              </li>
              <li >
                <a  href="#">why choose us</a>
              </li>
              <li >
                <a  href="#">careers</a>
              </li>
              <li >
                <a  href="#">portfolio</a>
              </li>
              <li >
                <a  href="#our-clients">our clients</a>
              </li>
              <li >
                <a  href="#">contact us</a>
              </li>
            </ul>
            <ul >
              <button >request a quote</button>
            </ul>
          </div>
        </div>
      </nav>
    </header>

can any one help please?

CodePudding user response：

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/[email protected]/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.