Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when the "NextEvent" link is pressed). Any ideas?
<body>
<nav>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<ul class="nav-links ">
<li><a href="#section2">Home</a> </li>
<li><a href="#section2">NextEvent</a> </li>
<li><a href="index">Music </a> </li>
<li><a href="index">About</a> </li>
<li><a href="index">Boooking</a> </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</div>
</header>
</nav>
#
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
...
JavaScript
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
navLinks.forEach((link, index) => {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7}s`;
console.log(index / 7);
nav.classList.toggle('nav-disable');
});
navLinks.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
Need Fix
navLinks.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});