I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can't seem to pinpoint the issue with either my JavaScript or HTML.
Here's a snippet of the CSS:
@media screen and (max-width:768px){
body{
overflow: hidden; /*Disable Scroll*/
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh; /*Fill Screen Height*/
/*Moving inside the "navbar" */
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
background-color: rgb(1, 66, 44);
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
And here's part of the JS:
const navSlide = ()=>{
const burger = document.querySelector('.buger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', ()=>{
nav.classList.toggle('nav-active');
});
}
navSlide();
/*More functions can go here
const app = ()=> {
navSlide();
navSlide();
navSlide(); ....}*/