I have build a navigation list in my header class, also inside js file there is a function to toogle another class that will make nav appear and dissapear on click when in mobile view <768px. Cant understand why id does not toogle on click as it is now, cant make it work, please help.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav__list");
burger.addEventListener("click", () => {
nav.classList.toggle(".nav-active");
});
}
const app = () => {
navSlide();
}html {
font-size: 62.5%;
}
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
font-family: 'Rokkitt', serif;
font-weight: 400;
line-height: 1.7;
color: #fff;
}
.header {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))), url(../img/hero-img.jpg);
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../img/hero-img.jpg);
background-size: cover;
height: 100vh;
}
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 4rem;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 40%;
}
@media screen and (max-width: 1300px) {
.nav__list {
width: 50%;
}
}
@media screen and (max-width: 1024px) {
.nav__list {
width: 65%;
}
}
@media screen and (max-width: 768px) {
.nav__list {
position: absolute;
right: 0;
height: 50vh;
top: 4rem;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 42%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.nav__item {
list-style-type: none;
}
@media screen and (max-width: 768px) {
.nav__item {
opacity: 0;
}
}
.nav__link {
color: #fff;
text-decoration: none;
letter-spacing: 3px;
font-weight: 700;
font-size: 1.6rem;
}
.logo {
color: #fff;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 2rem;
}
.burger {
display: none;
cursor: pointer;
}
.burger__line1, .burger__line2, .burger__line3 {
width: 20px;
height: 3px;
background-color: #fff;
margin: 3px;
}
@media screen and (max-width: 768px) {
.burger {
display: block;
}
}
.nav-active {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
}```
<!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>Zakład Kamieniarski - Krzysztof Posiadała</title>
<link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="header">
<nav class="nav">
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Strona Główna</a></li>
<li class="nav__item"><a href="#" class="nav__link">O nas</a></li>
<li class="nav__item"><a href="#" class="nav__link">Oferta</a></li>
<li class="nav__item"><a href="#" class="nav__link">Kamień</a></li>
<li class="nav__item"><a href="#" class="nav__link">Kontakt</a></li>
</ul>
<div class="burger">
<div class="burger__line1"></div>
<div class="burger__line2"></div>
<div class="burger__line3"></div>
</div>
</nav>
<div class="MainText">
<h1 class="Company__name">
Zakład Kamieniarski
</h1>
<h2 class="Company__owner">
Krzysztof Posiadała
</h2>
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>Cant figure out why my js function doesn't work, when i click on burger class .nav-active doesn't toogle.
Please help
In your JS, you are calling navSlide() inside of app, but nothing is calling the app function. If app() never gets called, then navSlide() never gets called, and if navSlide() never gets called, then the event listener never gets added to your burger.
You just need to call app().
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav__list");
burger.addEventListener("click", () => {
nav.classList.toggle("nav-active");
});
}
const app = () => {
navSlide();
}
app(); // add this
As a side note, you should consider turning your burger into a proper button element (with type="button"). That's more accessible to screen readers and keyboard users.