Does someone know why my navigation lists do not show when the sidebar is open? They are there but just not visible.
Appreciate any help.
HTML FILE
<!DOCTYPE html><br />
<html><br />
<head><br />
<link rel="stylesheet" href="style.css"><br />
<title>website name</title><br />
<link rel="icon" href="ethernet.png"><br />
<br />
</head><br />
<body><br />
<nav><br />
<div class="logo"><br />
<h4>The NAV</h4><br />
</div><br />
<ul class="navigation"><br />
<li><a href="index.html">Home</a></li><br />
<li><a href="projects.html">Projects</a></li><br />
<li><a href="programming.html">Programming</a></li><br />
<li><a href="news.html">News</a></li><br />
<li> <a href="about.html">About Me</a></li><br />
</ul><br />
<div class="burger"><br />
<div class="line1"></div><br />
<div class="line2"></div><br />
<div class="line3"></div><br />
</div><br />
</nav><br />
<br />
<script src="app.js"></script><br />
</body><br />
<br />
<footer><br />
<br />
</footer><br />
</html>
CSS FILE
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5DADE2;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(255, 255, 255);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.navigation {
display: flex;
justify-content: space-around;
width: 40%;
}
.navigation li {
list-style: none;
}
.navigation a {
color: rgb(255, 255, 255);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color:rgb(256, 256, 256);
margin: 5px;
}
@media screen and (max-width: 1024px) {
.navigation {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5DADE2;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
JS FILE
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
const navLinks = document.querySelectorAll('.navigation li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + 2}';
}
});
});
}
navSlide();
What I have tried:
In the CSS file, .navigation li sets the opacity to zero, but the Javascript function is supposed to have it fade in so I think the problem may be '${index / 7 + 2}'. It's detected as a string but shouldn't be, and I don't know how to fix it.