I've made a simple javascript file to add a class to my nav so it shows when the burger icon is clicked. I've used the script tag to add it to my html file but it doesn't seem to work. Clicking the burger does nothing. I've checked F12 and it imports the file fine with no errors si unsure what the issue is.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();.nav-links {
display: flex;
justify-content: space-around;
align-items: center;
width: 40%;
list-style: none;
transition: transform 0.5s ease-in;
}
.nav-active {
transform: translateX(0%);
}
@media screen and (max-width: 1100px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
top: 0px;
height: 100vh;
background: #009af3;
display: flex;
flex-direction: column;
align-items: center;
z-index: 4;
transform: translateX(100%);
}
.nav-link {
opacity: 0;
}
.burger {
display: block;
}
nav {
justify-content: space-between;
margin: auto;
width: 80%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home - Leicster Production Services</title>
<link rel="stylesheet" href="/css/pages/index.css">
<link rel="stylesheet" href="/css/media-queries/index.css">
<link rel="stylesheet" href="https://use.typekit.net/rum4qex.css">
<script src="/js/burger.js"></script>
</head>
<body>
<header class="header">
<div class="header-main">
<nav>
<div class="logo-container">
<img src="/images/Business/logo.png" alt="LPS Logo">
</div>
<ul class="nav-links">
<li><a class="nav-link active" href="#">Home</a></li>
<li><a class="nav-link" href="#">Production</a></li>
<li><a class="nav-link" href="#">Dry Hire</a></li>
<li><a class="nav-link" href="#">Installation</a></li>
<li><a class="nav-link" href="#">About Us</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="header-content">
<h3>Welcome to</h3>
<img src="./images/Business/logo.png" alt="LPS Logo">
<a class="button" href="#">View Hire Catalogue</a>
</div>
</div>
<div class="hire-bar">
<h3>Hire Catagories</h3>
<h3>Lighting</h3>
<h3>Sound</h3>
<h3>Video</h3>
<h3>Rigging</h3>
</div>
</header>
<div class="columns">
<a href="#">
<div class="column1">
<h3>Dry Hire</h3>
</div>
</a>
<a href="#">
<div class="column2">
<h3>Production</h3>
</div>
</a>
<a href="#">
<div class="column3">
<h3>Installation</h3>
</div>
</a>
</div>
<div class="main-content">
<div class="left">
<h1>A Brief Introduction</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, id distinctio. Qui laboriosam labore nostrum ut accusantium vel? Nam, eum distinctio illo at quae delectus tempore beatae placeat aliquam ut?<br>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Explicabo, dolorum. Vero tempora repudiandae vitae. Officia impedit nostrum inventore labore, hic quis, illum illo, error incidunt iste quasi optio atque temporibus?<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Natus adipisci, dolore dicta reprehenderit quibusdam eum sunt reiciendis, saepe non perferendis rem iusto eos est fugit! Facilis cumque odio nisi libero?</p>
</div>
<div class="right">
<h1>News</h1>
<br>
<div class="inner-column">
<div class="inner-left">
</div>
<div class="inner-right">
<h2>New Equipment!</h2>
<p>We have recently taken shipment of some new equipemnt! Check our hire catalogue for more info!</p>
<a href="#">More info -></a>
</div>
</div>
<br>
<br>
<div class="inner-column">
<div class="inner-left">
</div>
<div class="inner-right">
<h2>New Equipment!</h2>
<p>We have recently taken shipment of some new equipemnt! Check our hire catalogue for more info!</p>
<a href="#">More info -></a>
</div>
</div>
</div>
</div>
<footer>
<div class="top-footer">
<div class="site-map">
<div class="footer-section">
<h3>Hire Catalogue</h3>
<ul>
<li><a href="#">Audio</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Power</a></li>
<li><a href="#">Production</a></li>
<li><a href="#">Rigging</a></li>
<li><a href="#">Drapes</a></li>
<li><a href="#">Staging</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Effects</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Services</h3>
<ul>
<li><a href="#">Dry Hire</a></li>
<li><a href="#">Production</a></li>
<li><a href="#">Installation</a></li>
<li><a href="#">Custom Events</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Company</h3>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Meet The Team</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Legal Stuff</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Clients</h3>
<ul>
<li><a href="#">Get a Quote</a></li>
<li><a href="#">New Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="bottom-footer">
<div class="logo-container">
<img src="/images/Business/logo-invert.png" alt="LPS Logo">
</div>
<div class="legal-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, deleniti voluptatem fugiat dolore vitae quis velit, quam eaque corporis perferendis incidunt enim beatae? Reprehenderit modi perspiciatis omnis vitae officia mollitia!
</div>
</div>
</footer>
</body>
</html>Everything is in the correct folder as it imports the file fine, just nothing happens when I click.
TIA
. If you put it in your header, the javascript tries to get the element .burger and the .nav-links before they exist, since the browser did not get to that point yet
– Jonas Grumann Sep 23 '19 at 14:38