We Keep Coding

Hamburger menu z-index issue

I made a hamburger menu for the mobile responsive mode of my website and the menu works but because it's layered above all other components I am not able to click on buttons or select anything, this happens even when the hamburger menu is closed. Is it possible to change the z-index only when the hamburger menu is open?
Navbar component
The problem is with the nav-menu div
function Topbar() {
const timeout = () => {
setTimeout(() => {
if (window.location.pathname === '/') {
uncheckAll();
}
}, 600);
};
function check(checked = true) {
const checkboxes = document.querySelectorAll('input.checkbox');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
function uncheckAll() {
check(false);
}
return (
<div className="nav">
<div className="navbar">
<div className="menu">
<div className="label">Navbar</div>
<div className="spacer"></div>
<div className="item">
<span>
<a href="#Intro" className="link">
HOME
</a>
</span>
</div>
<div className="item">
<span>
<a href="#About" className="link">
About
</a>
</span>
</div>
<div className="item">
<span>
<a href="#Projects" className="link">
PROJECTS
</a>
</span>
</div>
<div className="item">
<span>
<a href="#Contact" className="link">
CONTACT
</a>
</span>
</div>
</div>
</div>
<div className="nav-menu">
<div id="menuToggle">
<input type="checkbox" className="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>
<a href="#Intro" className="link" onClick={timeout}>
Home
</a>
</li>
<li>
<a href="#About" className="link" onClick={timeout}>
About
</a>
</li>
<li>
<a href="#Projects" className="link" onClick={timeout}>
Projects
</a>
</li>
<li>
<a href="#Contact" className="link" onClick={timeout}>
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
);
}
export default Topbar;
SASS
#media screen and (max-width: 619px) {
.nav .navbar {
display: none;
}
.nav .nav-menu {
display: block;
}
.nav .nav-menu #menuToggle {
display: flex;
-webkit-tap-highlight-color: transparent;
-moz-tap-highlight-color: transparent;
-o-tap-highlight-color: transparent;
}
}
ul {
padding: 0;
list-style-type: none;
}
#menuToggle {
flex-direction: column;
-webkit-user-select: none;
user-select: none;
position: fixed;
top: 15px;
left: 15px;
display: none;
min-width: 85%;
min-height: 100%;
z-index: 10000;
animation: moveRight ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.nav-menu {
height: 45px;
width: 60px;
background-color: rgba(128, 128, 128, 0.315);
z-index: 2;
position: fixed;
top: 0;
}
#menuToggle input {
display: flex;
width: 40px;
height: 32px;
position: absolute;
cursor: pointer;
opacity: 0;
z-index: 10000;
}
#menuToggle span {
display: flex;
width: 29px;
height: 2px;
margin-bottom: 5px;
position: relative;
background: #ffffff;
border-radius: 3px;
z-index: 10000;
transform-origin: 5px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-3px, -1px);
background: white;
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
width: 85%;
box-shadow: 0 0 10px rgb(56, 56, 56);
height: 100%;
margin: -50px 0 0 -50px;
padding: 50px;
background-color: rgba(56, 56, 56, 0.989);
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding-left: 20px;
padding-bottom: 10px;
transition-delay: 2s;
}
#menu li a {
text-decoration: none;
color: white;
font-size: 30px;
font-family: 'Roboto Sans', sans-serif;
font-weight: 500;
font-style: normal;
}
#menuToggle input:checked~ul {
transform: none;
}
Working example: https://codesandbox.io/s/hamburger-menu-w456br?file=/src/App.jsx

some pointer-event css property can fix this....
here is the solution.... see it and ask if u need help

Function not running, something is wrong in my CSS somewhere but where?

I'm working on a project and using a code along to help me understand how to build an Nav Bar. I am using this tutorial: https://www.youtube.com/watch?v=gXkqy0b4M5g
I've haven't gone past 22:05 in the video.
I've built out the HTML, CSS and first JavaScript function which is supposed to show the navbar when you click on the hamburger menu which we've built out of div's. I've built out the function in JavaScript, I am receiving no errors, and everything matches the video to a "T" and looks 100% right but for whatever reason it will not run the function when I click the hamburger menu.
console.log("Hello!");
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
nav .nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #366576;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
nav .nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
I've been at this for over 24 hours now and I cannot for the life of me find anything wrong. Everything is linked and again, I am not seeing any errors. It works exactly like this on the video I was following along with. Anyone have any clue what's going on here?

You can play with the media query and the screen sizes.
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links 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 + 1.5}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #504954;
font-family: 'Popins', 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: 30%;
}
.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;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 768px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #504954;
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;
cursor: pointer;
}
}
.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)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<h4>Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</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>

Looks like the classes line1, line2, and line3 are not defined and the "hamburger" occupies no screen space for you to click. I made .burger visible by:
<div class="burger">
<div class="line1">---</div>
<div class="line2">...</div>
<div class="line3">---</div>
</div>
and added some logging:
burger.addEventListener('click', () => {
console.log(nav.classList[1]);
nav.classList.toggle('nav-active');
console.log(nav.classList[1]);
});
If you click the "hamburger" repeatedly, the console should show alternating undefined and nav-active each time.

Nav-bar wont show up z-index issue(?)

The first html I did was doing fine with its z-index but on the second one, I added sticky nav bar, and now the nav bar isn't showing up when in phone mode.
Here is the comparison:
(sorry for the different sized images)
#navbar {
position: fixed;
top: 0px;
display: flex;
overflow: hidden;
padding: 10px 10px; /* Large padding which will shrink on scroll (using JS) */
transition: 0.4s; /* Adds a transition effect when the padding is decreased */
justify-content: space-around;
align-items: center;
min-height: 8vh;
width: 100%;
background-color: #55426e;
z-index: 4;
}
.sticky{
padding: 5px 10px;
}
.burger {
display: none;
cursor: pointer;
padding: 5px;
z-index: 3;
}
.burger div{
width: 23px;
height: 3px;
background-color: aliceblue;
margin: 5px;
transition: all 0.3s ease;
border-radius:10px;
}
#media screen and (max-width: 1024px) {
.nav-links{
width: 65%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #55426e;
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;
}
#navbar {
padding: 2px 10px !important;
/* Use !important to make sure that JavaScript
doesn't override the padding on small screens */
}
}
.withpic {
position: relative;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5)), url(aboutme2.JPG);
height: 100vh;
background-size: cover;
background-position: center;
}
.wopic {
position: relative;
background-color: #ddd5e2;
padding-top: 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
.under {
position: relative;
z-index: 3;
}
/*sticky nav bar -- from w3schools*/
.overtext {
display: flex;
align-items: flex-end;
flex-direction: column;
color: #ddd5e2;
text-align: center;
position: relative;
z-index: -99;
}
<DOCTYPE! html>
<html>
<head>
<title>Website</title>
<link href="ask.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="withpic">
<nav>
<div id="navbar">
<div id="logo">
<h4>logo</h4>
</div>
<ul class="nav-links">
<li> HOME </li>
<li> ABOUT </li>
<li> PHOTOGRAPHY </li>
<li> ORGANIZER </li>
<li> CONTACT </li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<div class="lefty under">
<div class="overtext">
<h1>About Me</h1>
<em>
私について
</em>
</div>
</div>
</div>
<div class="wopic">
<p>section without picture</p>
</div>
<script src="app.js"></script>
<script src="nav.js"></script>
</body>
</html>
//burger javascript
function navSlide() {
let burger = document.querySelector(".burger");
let nav = document.querySelector(".nav-links");
let navLinks = document.querySelectorAll(".nav-links li");
//toggle nav
burger.addEventListener("click", function() {
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 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
//sticky nav bar with transitions javascript
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "2px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "25px";
}
}
I deleted some font properties in css to avoid it getting longer. Please tell me if I need to add some more css from my original code.

Here's an updated snippet with the visibility issue fixed. There must be additional css that you didn't include above, but the main idea is here. Click the hamburger menu and the nav bar appears.
Two main problems I saw:
An overflow: hidden on the #nav
No transform: translateX(0) to bring the nav menu into position.
function navSlide() {
let burger = document.querySelector(".burger");
let nav = document.querySelector(".nav-links");
let navLinks = document.querySelectorAll(".nav-links li");
//toggle nav
burger.addEventListener("click", function() {
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 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
//sticky nav bar with transitions javascript
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("navbar").style.padding = "2px 10px";
document.getElementById("logo").style.fontSize = "20px";
} else {
document.getElementById("navbar").style.padding = "10px 10px";
document.getElementById("logo").style.fontSize = "25px";
}
}
:root,
html,
body {
height: 100%;
width: 100%;
}
#navbar {
position: fixed;
top: 0px;
display: flex;
padding: 10px 10px;
/* Large padding which will shrink on scroll (using JS) */
transition: 0.4s;
/* Adds a transition effect when the padding is decreased */
justify-content: space-around;
align-items: center;
min-height: 8vh;
width: 100%;
background-color: #55426e;
z-index: 4;
}
.sticky {
padding: 5px 10px;
}
.burger {
display: none;
cursor: pointer;
padding: 5px;
z-index: 3;
}
.burger div {
width: 23px;
height: 3px;
background-color: aliceblue;
margin: 5px;
transition: all 0.3s ease;
border-radius: 10px;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 65%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #55426e;
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-links.nav-active {
transform: translateX(0);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav-links.nav-active li,
.nav-links.nav-active li a {
list-style: none;
opacity: 1;
color: white;
text-decoration: none;
}
#navbar {
overflow: visible;
padding: 2px 10px !important;
/* Use !important to make sure that JavaScript
doesn't override the padding on small screens */
}
}
.withpic {
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(aboutme2.JPG);
height: 100vh;
background-size: cover;
background-position: center;
}
.wopic {
position: relative;
background-color: #ddd5e2;
padding-top: 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
.under {
position: relative;
z-index: 3;
}
/*sticky nav bar -- from w3schools*/
.overtext {
display: flex;
align-items: flex-end;
flex-direction: column;
color: #ddd5e2;
text-align: center;
position: relative;
z-index: -99;
}
<DOCTYPE! html>
<html>
<head>
<title>Website</title>
<link href="ask.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="withpic">
<nav>
<div id="navbar">
<div id="logo">
<h4>logo</h4>
</div>
<ul class="nav-links">
<li> HOME </li>
<li> ABOUT </li>
<li> PHOTOGRAPHY </li>
<li> ORGANIZER </li>
<li> CONTACT </li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<div class="lefty under">
<div class="overtext">
<h1>About Me</h1>
<em>
私について
</em>
</div>
</div>
</div>
<div class="wopic">
<p>section without picture</p>
</div>
<script src="app.js"></script>
<script src="nav.js"></script>
</body>
</html>

Responsive navigation list not showing content

I would like to add a responsive navigation bar to my blog. I got a video from youtube about responsive navigation bar. But i met with a problem. On 768px the content of navigation menu is not showing. When I inspect with Chrome, those links are already there. But I can't see. I am looking for a solution
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>Home</li>
<li>Orders</li>
<li>Forms</li>
<li>Act & Rules</li>
<li>Students Corner</li>
<li>Schools Gallery</li>
<li>Useful Links</li>
<li>About</li>
<li>Contact Us</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();
Please help me to find the solution

If you set an element’s position to absolute, its parent should be set to relative in order for it to appear. You can try setting the position of nav to relative when your screen size is 768px.
Edit:
Remove the following property:
.nav-links li {
opacity: 0;
}
Best of luck.

Issues with making a Nav-Menu go away upon clicking a link

so I'm having issues with closing my mobile nav hamburger menu when a link is clicked. Only my top link is clickable right now just FYI.
The answer is on the tip of my tongue but I'm not quite there. I think mainly it's a syntax issue on my end. So yes the menu on mobile opens and closes when clicking the menu, but it doesn't close when a link is clicked.
I've looked all over, but all I could find were jQuery answers.
<!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">
<link rel="stylesheet" href="css\style.css">
<title>eddiepearsonUX</title>
</head>
<body>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>Audio UX Study</li>
<li>Web App UX</li>
<li>Contact</li>
</ul>
</nav>
<section class="intro-section">
<h1 class="name">
<span>eddie</span>
<span>Pearson</span>
</h1>
<h3 class="intro">
<p>Audio<br>and Visual</p>
<p>UX</p>
</h3>
</section>
<h3 class="content-title">
<p>Audio UX Study</p>
</h3>
<ul style="list-style-type: none" id="Audio-UX-Study"class="content">
<li class="main-img"><img src="https://www.dl.dropboxusercontent.com/s/rktj2nhj07l2ne7/20191206-Screenshot%20%28223%29.jpg?dl=0" alt="Ableton screen with wavforms and effects stack"></li>
<li class="second-img"><img src="https://www.dl.dropboxusercontent.com/s/j1aipb71ccj3o64/Screenshot%20%28225%29.png?dl=0" alt="Wavforms from audio"></li>
<li class="copy">
</li>
<li class="main-img"></li>
<li class="second-img"></li>
<li class="copy">
</li>
</ul>
<script src="js\app.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather', serif;
}
body {
font-family: sans-serif;
background-color: #e6e6e0;
}
/* NAVIGATION */
nav {
height: 10vh;
background: #e6e6e0;
/* position: sticky; */
}
.name-div {
position: absolute;
width: 50%;
top: 1.8rem;
left: 2rem;
}
.name {
color: rgb(82, 82, 56);
font-size: calc(0.2rem + 1.1rem);
}
.nav-links {
display: flex;
position: relative;
list-style: none;
max-width: 75vw;
height: 100%;
justify-content: end;
align-items: center;
margin: auto;
}
.nav-links li a {
color:rgb(82, 82, 56);
font-weight: bold;
text-decoration: none;
font-size: 18px;
padding-left: 1em;
}
#media screen and (max-width: 768px) {
.nav-links {
position: fixed;
background: #e6e6e0;
height: 100vh;
width: 100%;
flex-direction: column;
justify-content: space-around;
margin-left: auto;
clip-path: circle(100px at 90% -20%);
-webkit-clip-path: circle(100px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1100px at 90% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
max-width: 95%;
}
.line {
width: 30px;
height: 3px;
background: rgb(82, 82, 56);
margin: 5px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links li {
opacity: 0;
}
.nav-links a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.1s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
}
/* INTRO SECTION */
.intro-section {
max-width: 75vw;
margin: auto;
/* background-color: #fff; */
}
.intro-section .name {
padding: 2rem 0 2rem 0rem;
font-size: calc(0.8rem + 3vw);
}
.intro-section .name span:nth-of-type(1) {
color: rgb(174, 177, 156);
}
.intro {
color:rgb(174, 177, 156);
font-size: calc(0.6rem + 2vw);
}
.intro p:nth-of-type(2) {
font-size: calc(0.6rem + 3vw);
color:rgb(82, 82, 56);
}
/* CONTENT SECTION */
.content-title {
display: block;
margin: auto;
margin-top: 5rem;
margin-bottom: 2rem;
max-width: 75vw;
font-size: calc(0.6rem + 1vw);
color:rgb(82, 82, 56);
}
.content {
max-width: 75vw;
margin: 3rem auto;
display: grid;
width: 100%;
height: auto;
display: grid;
margin-bottom: 3em;
grid-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.main-img {
grid-column: 1 / 2;
}
.content > li > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});

The only thing you're listening for clicks on is the hamburger element.
Try adding a listener on the navLinks element, like so:
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
const whatever = document.querySelectorAll('.nav-links li a');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle('fade');
});
});
navLinks.addEventListener('click', () => {
navLinks.classList.toggle('open')
links.forEach(link => {
link.classList.toggle('fade');
});
})
There might be more tweaks you need to make, but this should get you started.