im not much of a coder but this code has worked for many people and I've spent hours trying to find my error. when I click the hamburger menu the slide menu off to the right is supposed to slide into view and fade the buttons in from opacity 0 to opacity 1. none of this happens at all which makes me think I have a js error.
any help would be great.
jsfiddle below
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', ()=>{
nav.classlist.toggle('nav-active');
});
}
navSlide();@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,400,600,700,900&display=swap');
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
height: 2.5em;
background-color:#7BC58A;
position: sticky;
top: 0;
color: #FFFFFF;
font-family: 'Raleway', sans-serif;
font-size: .8rem;
text-align: left;
padding-left: 6em;
padding-top: .4em;
}
.logo-image{
width: 50px;
height: 50px;
overflow: hidden;
margin: 0 0em;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
}
.nav-links{
display:flex;
justify-content: space-around;
width:45%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color:#5A5A5A;
font-size:.75em;
text-transform:uppercase;
text-decoration: none;
font-family: 'Raleway', sans-serif;
font-weight:600;
}
.nav-links a:hover{
color:#7BC58A;
}
.nav-links a:active {
color: #D1D1D1;
}
.burger{
display: none;
float:right;
position: relative;
top:0px;
}
.burger div{
width:25px;
height:3px;
background-color:#5a5a5a;
margin: 3px;
border-radius: 40px;
cursor: pointer;
}
@media screen and (max-width:1024px){
.nav-links{
width:55%;
}
}
@media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height:92vh;
top: 8vh;
background-color: #7BC58A;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translate(100%);
}
.nav-links li{
opacity:1;
}
.burger{
display:block;
}
}
.nav-active{
transform:translatex(100%)
}
@keyframes navLinksFade{
from{
opacity:0;
transform:translateX(50px);
}
to{
opacity:1;
transform:translateX(0px);
}
}<!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><section class="header"><i class="fa fa-phone"></i> (209)838-1934 <i class="fa fa-envelope"></i> inquiry@allseasonlawn.net</section><!-- NAVIGATION STARTS--><nav id="nav"><a class="navbar-brand" href="/"><div class="logo-image"><img src="images/navbar_logo_50x50.png" class="img-fluid"></div></a><ul class="nav-links"><li><a href="/index.php" class="active">Home</a></li><li><a href="/about.html">About</a></li><li><a href="/services.html">Services</a></li><li><a href="/reviews.html">Reviews</a></li><li><a href="/gallery.html">Gallery</a></li><li><a href="/contact.html">Contact</a></li></ul><div class="burger"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></nav><script src="app.js"></script></body></html>