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?

Derwing Medina · Accepted Answer · 2022-06-28T22:17:24.573

0

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.

edited Jun 28 '22 at 22:17

answered Jun 28 '22 at 22:15

Derwing Medina

16
2

i did but it is not my problem problem is when i press the link to go to page section navbar does not collapse – Amr El-Nagdy Jun 28 '22 at 22:22
I suppose that your using jquery, if so then this should be works for you. $('.navbar-nav>li>a').on('click', function(){ $('.navbar-collapse').collapse('hide'); }); – Derwing Medina Jun 28 '22 at 22:34
i put that in script.js or style.css? – Amr El-Nagdy Jun 28 '22 at 22:35
style.css is only for css styles, put this in your script.js or your index.html (script section) – Derwing Medina Jun 28 '22 at 22:37
still not working – Amr El-Nagdy Jun 28 '22 at 22:39
be sure your using jquery, put this in your index.html (meta tag) – Derwing Medina Jun 28 '22 at 22:39
thank you so much for being helpful and patient with me I really appreciate your help it is working perfect now thaaank you sooooo much :) – Amr El-Nagdy Jun 28 '22 at 22:44
happy to help you! – Derwing Medina Jun 28 '22 at 22:47

how to collapse navbar onclick (bootstrap5)

1 Answers1