Is there a way to make my Bootstrap burger menu automatically close when the user clicks on a menu link, rather than having to click on the burger itself? I've tried using some JavaScript code but it ends up disabling the burger menu entirely. Can anyone provide guidance or a solution to this issue? Thank you in advance!
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>