Close the burger menu after click on a link

Question

I have a burger menu made with Bootstrap but I would like it to close when the user clicks on a menu link. Currently it can only close if you click on the burger which is not practical. I searched but couldn't find it. I had tried the code below in javascript but it completely disables the burger menu which no longer opens after click. Thank you in advance for your help !

Javascript

var els = document.querySelectorAll('nav-link');

for( var i=els.length; i--; ) {
  els[i].addEventListener( 'click', function(){
    
     document.getElementById('navbarResponsive').style.display = 'none';
  );
}

Html

<nav class="navbar navbar-expand-lg navbar-light bg-white p-2" id="navbar">
   <div class="container">
     <a href=""><img class="logo" src="images/logo.png" alt="logo"></a>
     <a class="navbar-brand" href="#"></a>
     <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
       aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarResponsive">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item active rounded-circle">
           <a class="nav-link" id="links" href="#accueil">Accueil</a>
         </li>
         <li class="nav-item rounded-circle" onclick="changeHref('#');">
           <a class="nav-link" id="links" href="#mes-services">Services</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#mes-competences">Compétences</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#mes-projets">Projets</a>

         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#tarifs">Tarifs</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#a-propos">A propos</a>
         </li>
         <li class="nav-item contact-icone rounded-circle">
           <a class="nav-link" href="#contact">Contact</a>
         </li>
       </ul>
     </div>
   </div>
 </nav>

there are multiple ways depending on where you host or provide Bootstrap. If you use a Node.js server for delivery or just loading the files. In latest case you could dispatch an click event to the close button — tacoshy, Jul 24 '23 at 13:30
`document.querySelectorAll('nav-link')` - that of course selects nothing at all here, because you do not have any elements with the _tag name_ `nav-link`. — CBroe, Jul 24 '23 at 13:58
`document.getElementById('navbarResponsive').style.display = 'none';` - that is terrible regarding usability. The `aria-expanded` attribute on the button has not changed along with this now, but it _should_, for users of assistive technology like screenreaders. You should do this part by calling the appropriate method of the collapsible component, https://getbootstrap.com/docs/5.3/components/collapse/#methods — CBroe, Jul 24 '23 at 14:01

Rahmat Hidayat · Accepted Answer · 2023-07-24T14:11:16.397

You can try this :

document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                const navbarResponsive = document.getElementById('navbarResponsive');
                if (navbarResponsive.classList.contains('show')) {                        
                    const navbarToggler = document.querySelector('.navbar-toggler');
                    navbarToggler.click(); 
                }
            });
        });

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-white p-2" id="navbar">
   <div class="container">
     <a href=""><img class="logo" src="images/logo.png" alt="logo"></a>
     <a class="navbar-brand" href="#"></a>
     <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
       aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarResponsive">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item active rounded-circle">
           <a class="nav-link" id="links" href="#accueil">Accueil</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" id="links" href="#mes-services">Services</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#mes-competences">Compétences</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#mes-projets">Projets</a>

         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#tarifs">Tarifs</a>
         </li>
         <li class="nav-item rounded-circle">
           <a class="nav-link" href="#a-propos">A propos</a>
         </li>
         <li class="nav-item contact-icone rounded-circle">
           <a class="nav-link" href="#contact">Contact</a>
         </li>
       </ul>
     </div>
   </div>
 </nav>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" defer></script>

The code works ! Thank you very much ! – Bertou19 Jul 24 '23 at 14:39 — Bertou19, Jul 24 '23 at 14:39

score 0 · Answer 2 · answered Jul 24 '23 at 14:34

There was a typing error in querySelectorAll I have fixed it try this one it will solve the problem:

    var els = document.querySelectorAll('.nav-link');

   

    els.forEach(n=> n.addEventListener("click", ()=>{
        document.getElementById('navbarResponsive').style.display = 'none';
    }))

Close the burger menu after click on a link

2 Answers2