I'm currently working on a project and following a tutorial to help me create a navigation bar. The tutorial I am using can be found here: https://www.youtube.com/watch?v=gXkqy0b4M5g. So far, I have only reached the 22:05 mark in the video.
I have successfully constructed the HTML, CSS, and initial JavaScript function that is supposed to display the navbar when clicking on the hamburger menu created from div elements. Despite having no errors in my code and everything being an exact match with the tutorial, the function fails to execute when I click the hamburger menu.
console.log("Hello!");
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();nav .nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #366576;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
nav .nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
<a href="#header">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>I've been troubleshooting this issue for more than 24 hours now without any success. Everything seems to be correctly connected, and there are no apparent errors in the code. It behaves as expected in the tutorial video I am following. Does anyone have any insights into what might be causing this problem?