Question 214973 in Html Question posted in
Some basic documentation can be found here.

Html – Close the burger menu after click on a link

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>
Tags:

2

Answers


  1. 0

    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/[email protected]/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/[email protected]/dist/js/bootstrap.min.js" defer></script>
    Login or Signup to reply.
  2. 0

    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';
    }))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search