Bootstrap 5 Close Navbar after click

Question

I don't have much experience with Bootstrap. I found this code on the internet and I don't understand how javascript in html works. I would like the hamburger menu to close after selecting an item in the navigation bar. of course in the mobile version

Can anyone help me?

git hub address

github page

 <!-- Page Navbar -->
<nav class="custom-navbar" data-spy="affix" data-offset-top="20">
    <div class="container">
        <a class="logo" href="index.html">Portfolio</a>         
        <ul class="nav">
            <li class="item">
                <a class="link" href="#home">Home</a>
            </li>
            <li class="item">
                <a class="link" href="#about">About</a>
            </li>
            <li class="item">
                <a class="link" href="#portfolio">Portfolio</a>
            </li>
            <li class="item">
                <a class="link" href="#testmonial">Testmonial</a>
            </li>
            <li class="item">
                <a class="link" href="#blog">Blog</a>
            </li>
            <li class="item">
                <a class="link" href="#contact">Contact</a>
            </li>
            <li class="item ml-md-3">
                <a href="components.html" class="btn btn-primary">Components</a>
            </li>
        </ul>
        <a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
        </a>
    </div>          
</nav><!-- End of Page Navbar -->

Answer 1

for this example menu

       <div id="navbarNav" class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#a1">A1 </a></li>
                <li class="nav-item"><a class="nav-link" href="#a2">A2</a></li>
                <li class="nav-item"><a class="nav-link" href="#a3">A3</a></li>
                <li class="nav-item"><a class="nav-link" href="#a4">A4</a></li>
                <li class="nav-item"><a class="nav-link" href="#a5">A5</a></li>
            </ul>
        </div>

this can be use

Array.from(document.querySelectorAll('.nav-link'))
    .forEach(item => {
        item.addEventListener('click', event => {
            new bootstrap.Collapse(document.getElementById("navbarNav")).hide();
            //new bootstrap.Collapse(document.getElementById("navbarNav")).toggle();
        })
    })

Answer 2

I don't have much experience with Bootstrap logic, but seems to me that we can achieve the hamburger menu with only classes and Bootstrap's attributes, we don't need Javascript at our end.

Look the example below edited from the Bootstrap Docs (Navbar > Responsive Behaviors > Offcanvas navbar). I added some comments to help you understand what the following codes are creating. I couldn't make the snippet below work here in stackoverflow, but I've tested it in CodePen and it works fine.

As you can see, the logic behind open/close the menu is made through the html attributes named data-bs-toggle, data-bs-target and data-bs-dismiss. The first two are attributes of the open menu button, the last one is used to close the menu on the close menu button.

In the links inside the menu, we don't see the data-bs-dismiss attribute because it should open a different window (I think), but if in your case you stay in the same window maybe you can add this attribute in the links too.

I won't try to better explain this, cause I also don't understand the details... but what matters is that it works, I guess.

    <!--import Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Actual example -->
    <nav class="navbar bg-light fixed-top">
      <div class="container-fluid">
        
        <!-- Header Menu -->
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Inside the hamburguer menu -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
          
          <!-- Title and close button -->
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          
          <!-- Menu items in an unordered list-->
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
            </ul>
            <form class="d-flex mt-3" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </div>
    </nav>

Answer 3

I managed to solve the problem. the menu is opened using jquery, it was only necessary to add one command when the link is clicked to start the function in jquery.