How can I hide the Bootstrap drop down menu after clicking a menu link?

Question

In my one page website, I have a sticky-top navbar with a burger-menu. If you click on the burger, a dropdown menu will appears, with all the links.

I want to hide the dropdown menu after clicking a menu link (so it will be shown only the navbar with the burger).

Also, there is no dorpdown menu on larger screen.

This is the code:

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
      <div class="container-xxl py-2">
        <a class="navbar-brand" href="#">CreatiVE Lab</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink1">Cos'è CreatiVE Lab?</a>
            </li>
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink2">Servizi</a>
            </li>
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink3">Dicono di noi</a>
            </li>
            <li class="nav-item px-lg-3 d-none d-lg-block">
              <a class="nav-link" href="#menuLink4">FAQ</a>
            </li>
            <li class="nav-item px-lg-3">
              <a class="nav-link" href="#menuLink5">Contatti</a>
            </li>
            <li class="nav-item ps-lg-3">
              <a class="btn btn-primary bigButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Inizia il tuo progetto</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

I want to know if there is a solution using Bootstrap classes or if I have to use Javascript.

@afloresescarcega this is the link --> https://codepen.io/dario-ludax/pen/yLzprJP — Elle, Dec 28 '21 at 17:58
@afloresescarcega colors and shapes are totally messed up in this link but you just need to check the navbar. Thanks a lot — Elle, Dec 28 '21 at 17:59
Thanks! Sorry, this is just a rough solution but I would add a click event on the nav-items that would remove the class "show" from the element "navbarNav" https://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class — afloresescarcega, Dec 28 '21 at 18:09

score 2 · Answer 1 · answered Dec 28 '21 at 18:23

Connect jQuery to you file by code

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

And insert below this click handler:

jQuery($ => {
  const $navbar = $('#navbarNav');

  $navbar.find('.nav-link').on('click', () => {
    setTimeout(() => {
      $navbar.collapse('hide');
    }, 500);
  });
});

Here:

jQuery($ => { ... }) — waits for document be totally loaded
const $navbar = $('#navbarNav') — storing your #navbarNav element into variable
$navbar.find('.nav-link') — searching for links on #navbarNav
.on('click', () => { ... }) — adds click listener for found links
setTimeout(() => { ... }, 500) — waits while scroll animation ends
$navbar.collapse('hide') — collapses #navbarNav

How it works on codepen.

Thanks! it partially works, beacuse adding the setTimeout attribute, the scroll stops before reaching the right section. Actually, if you set the setTimeout attribute to 1000 for example, the scroll is good, but it's weird the result that you have. Any idea? — Elle, Dec 28 '21 at 21:01
With 700 milliseconds it works perfectly fine. Thanks a lot! — Elle, Dec 28 '21 at 21:12

How can I hide the Bootstrap drop down menu after clicking a menu link?

1 Answers1