Seeking assistance to resolve an issue with a responsive navigation bar implementation on my blog. Despite the presence of links in the navigational menu at 768px, they are not visible when inspected using Chrome. Here is an image for reference: Please See this Image When Inspecting those Links are there But they are not visible
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>ATC</title>
</head>
<body>
<nav>
<div class="logo">
<h4>ATC</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Act & Rules</a></li>
<li><a href="#">Students Corner</a></li>
<li><a href="#">Schools Gallery</a></li>
<li><a href="#">Useful Links</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</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>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226,226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 90%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226,226,226);
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(226,226,226);
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1024px) {
.nav-links {
width: 100%;
}
}
@media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links 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);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
Javascript
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', ()=>{
//Toggle Nav
nav.classList.toggle('nav-active');
//animate Links
navLinks.forEach((link, index)=> {
if(link.style.animation) {
link.style.animation ='';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards $(index / 7 + 1.5)s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
In search of a viable solution to the problem described above.