Develop Reference

Professional menu with JavaScript and jQuery

I have designed a menu for my WordPress site.
My menu has two main problems:
1- When I click on the icon, the ".back" class, which puts gray color on the whole screen, becomes black. so that the background becomes completely black.
2- The second problem is related to when I click on the gray area.
When on the body with the ".back" class. I made it, I click it, the menu closes, but the icon does not return to the previous state.
I put the codes that I wrote below so that you can better understand my problem and I hope you can help me in solving this problem.
Thanks.
let icon = document.querySelector(".icon_menu");
let nav = document.querySelector(".main_menu");
icon.addEventListener("click", function() {
if (this.classList.contains("bi-grid-fill")) {
this.classList = "bi bi-x-circle-fill icon_menu";
icon.style.left = "25%";
icon.style.color = "#ff6f6f";
icon.style.fontSize = "30px";
nav.style.left = 0;
} else {
this.classList = "bi bi-grid-fill icon_menu";
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = "-300px";
}
$('body').append('<div class="back"></div>')
$('.back').click(function() {
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = '-300px';
$(this).remove();
});
});
.main_menu {
position: absolute;
top: 0;
left: -300px;
bottom: 0;
z-index: 999;
background: #eee;
padding-right: 2rem;
transition: all 1s ease;
}
.icon_menu {
position: fixed;
top: 10%;
left: 2%;
font-size: 40px;
color: #a66fff;
cursor: pointer;
z-index: 99999;
transition: all 1s ease;
}
.main_menu ul {
list-style: none;
line-height: 60px;
font-size: 35px;
}
.main_menu ul li a {
color: #000000;
text-decoration: none;
padding-right: 15px;
padding-left: 40px;
margin-left: -60px;
margin-bottom: 10px;
}
.back {
width: 100%;
height: 100%;
position: fixed;
z-index: 9 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #00000056;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<nav id="nav">
<span class="bi bi-grid-fill icon_menu"></span>
<aside class="main_menu">
<ul>
<li>
<a href="#">
home
</a>
</li>
<li>
<a href="#">
our articles
</a>
</li>
<li><a href="#">
about us
</a>
</li>
</ul>
</aside>
</nav>
</section>

Your first issue is caused because you keep adding/removing the element. This is bad practice, and inside you should just call .toggle() to hide/show it instead.
Your second issue is caused because you do only change the classes when the button is clicked, not the background.
Try this code instead:
let icon = document.querySelector(".icon_menu");
let nav = document.querySelector(".main_menu");
$('.back').hide();
$('.back').click(function() {
if ($(this).is(':hidden')) return;
$(this).toggle();
icon.classList = "bi bi-grid-fill icon_menu";
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = '-300px';
});
icon.addEventListener("click", function() {
if (this.classList.contains("bi-grid-fill")) {
this.classList = "bi bi-x-circle-fill icon_menu";
icon.style.left = "25%";
icon.style.color = "#ff6f6f";
icon.style.fontSize = "30px";
nav.style.left = 0;
} else {
this.classList = "bi bi-grid-fill icon_menu";
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = "-300px";
}
$('.back').toggle();
});
.main_menu {
position: absolute;
top: 0;
left: -300px;
bottom: 0;
z-index: 999;
background: #eee;
padding-right: 2rem;
transition: all 1s ease;
}
.icon_menu {
position: fixed;
top: 10%;
left: 2%;
font-size: 40px;
color: #a66fff;
cursor: pointer;
z-index: 99999;
transition: all 1s ease;
}
.main_menu ul {
list-style: none;
line-height: 60px;
font-size: 35px;
}
.main_menu ul li a {
color: #000000;
text-decoration: none;
padding-right: 15px;
padding-left: 40px;
margin-left: -60px;
margin-bottom: 10px;
}
.back {
width: 100%;
height: 100%;
position: fixed;
z-index: 9 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #00000056;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<nav id="nav">
<span class="bi bi-grid-fill icon_menu"></span>
<aside class="main_menu">
<ul>
<li>
home
</li>
<li>
our articles
</li>
<li>about us
</li>
</ul>
</aside>
</nav>
</section>
<div class="back"></div>

NavBar Auto Toggling On

I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!

I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>

Making a Page Inaccessible With a Button?

My goal is something similar to what YouTube has when you click their menu icon; the rest of the page gets darker and nothing on that part of the page is accessible to the user until the button is clicked again and the menu recedes. Any help with this would be greatly appreciated.
<!DOCTYPE html>
<body lang = 'en-US'>
<head>
<meta charset = 'UTF-8'>
<meta http-equiv = 'X-UA-Compatible' content = 'IE = edge'>
<meta name = 'viewport' content = 'width = device-width, initial-scale = 1'>
<title>Testing</title>
<!-- links to relative files -->
<link rel = 'stylesheet' href = '/Custom_Scrollbar.CSS'>
<link rel = 'shortcut icon' type = 'image/png' href = '/Images/Odd_Jobs_Favicon.png'>
</head>
<body>
<div class = 'headerBar'>
<style>
.headerBar {
position: absolute;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
background-color: #e0e0e0;
}
</style>
</div>
<div class = 'headerStrip'>
<style>
.headerStrip {
position: absolute;
width: 100%;
height: 5px;
top: 80px;
left: 0px;
background-color: #5e00bc
}
</style>
</div>
<div class = 'bodyBar'>
<style>
.bodyBar {
position: absolute;
width: 100%;
height: 100%;
top: 85px;
left: 0px;
background-color: #000000
}
</style>
</div>
<div class = 'jobLinks'>
<li><a class = 'find' href = '#'>Link</a></li>
<style>
.jobLinks {
text-decoration: none;
list-style: none;
}
.find {
position: absolute;
width: 80px;
height: 40px;
top: 30px;
left: 300px;
font-family: 'comfortaa';
font-size: 18px;
font-weight: 800;
color: #000000;
text-decoration: none;
text-align: center;
transition: ease-out 0.4s;
background-color: #e0e0e0;
}
.find:hover {
color: #5e00bc;
}
</style>
</div>
<div class = 'menu'>
<button class = 'menuButton'></button>
<div class = 'linkList'>
<ul>
<li><a class = 'links' href = '#'>Link 1</a></li>
<li><a class = 'links' href = '#'>Link 2</a></li>
<li><a class = 'links' href = '#'>Link 3</a></li>
<li><a class = 'links' href = '#'>Link 4</a></li>
<li><a class = 'links' href = '#'>Link 5</a></li>
<li><a class = 'links' href = '#'>Link 6</a></li>
<li><a class = 'links' href = '#'>Link 7</a></li>
</ul>
</div>
<style>
.menuButton {
position: absolute;
width: 30px;
height: 30px;
top: 25px;
left: 1303px;
border: none;
outline: none;
transition: ease-out 0.5s;
background-image: url('/Images/Menu_Icon.png');
background-color: #e0e0e0;
cursor: pointer;
}
.links {
font-family: 'comfortaa';
font-size: 18px;
font-weight: 500;
color: #000000;
text-decoration: none;
transition: ease-out 0.4s;
}
.links:hover {
color: #5e00bc;
}
.linkList {
position: fixed;
width: 150px;
height: 100%;
right: -150px;
top: 85px;
transition: ease-out 0.5s;
background: #e0e0e0;
}
.linkList ul li {
list-style: none;
padding: 15px;
}
.menuButton:focus ~ .linkList {
right: 0px;
}
</style>
<script>
menuBtn = document.getElementsByClassName('menuButton')[0];
menuBtn.addEventListener('click', function() {
menu = document.getElementsByClassName('linkList')[0];
menu.style.webkitTransition = '0.6s';
if (menu.style.right == '0px') {
menu.style.right = '-150px';
} else {
menu.style.right = '0px';
}
});
</script>
</div>
</body>
</html>

It can be achieved by some css and js.
I am adding menuOpen class when the menu is open. and removing it when the menu is closed.
menuOpen class css is setting other content besides menu unaccesseiable.
const open = document.querySelector("#open");
const close = document.querySelector("#close");
const menu = document.querySelector("#menu");
open.addEventListener("click", () => {
menu.classList.add("active");
document.body.classList.add("menuOpen");
});
close.addEventListener("click", () => {
menu.classList.remove("active");
document.body.classList.remove("menuOpen");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
overflow-x: hidden;
}
#menu {
display: flex;
flex-direction: column;
gap: 15px;
width: 100px;
position: absolute;
top: 0;
left: -100px;
background-color: #f5f5f5;
padding: 20px;
transition: .5s;
}
#menu.active {
left: 0;
}
.menuOpen {
position: relaive;
transition: .5s;
}
.menuOpen::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
height: 100vh;
width: 100vw;
overflow: hidden;
}
<button id="open">open</button>
<div id="menu">
<button id="close">close</button>
<button>a</button>
<button>a</button>
<button>a</button>
</div>
<p>content</p>

JavaScript Responsive Menu

I have this navigation menu as in the image here.
Below is my JS that I currently have to make it responsive so that it opens up on clicking it but it is not working:
function showMenu(event) {
event.preventDefault();
let element = document.getElementById('header');
if (element.classList.contains('active')) {
element.className = "";
} else {
element.className = "active";
}
}
header {
padding: 0 !important;
background: #fff;
}
header.active {
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
}
header.fixed {
padding: 0 0;
}
header button {
position: absolute;
top: 12px;
right: 25px;
display: block;
width: 30px;
height: 40px;
padding-top: 6px;
border: none;
background: #fff;
}
header button span {
position: relative;
top: 0;
display: block;
width: 100%;
height: 2.5px;
margin-bottom: 5px;
transition: all .2s ease;
border-radius: 15px;
background: #0d2366;
}
header button span:nth-child(2) {
right: 0;
width: 80%;
opacity: 1;
}
header button span:nth-child(3) {
width: 60%;
}
header.active button span:nth-child(1) {
top: 8px;
left: -4px;
-ms-transform: rotate(38deg);
transform: rotateZ(38deg);
}
header.active button span:nth-child(2) {
right: -100%;
opacity: 0;
}
header.active button span:nth-child(3) {
top: -6px;
left: -4px;
width: 100px;
-ms-transform: rotate(-38deg);
transform: rotateZ(-38deg);
}
header ul.menu-left {
display: none;
}
header img {
margin-left: 25px !important;
}
header.active ul.menu-left {
display: block;
float: none;
clear: both;
}
header.active ul.menu-left li {
display: block !important;
padding: 10px 20px;
}
header ul.menu-right {
display: none;
}
<!--Header-->
<header id="header">
<div class="wrapper">
<a href="/">
<img src="images/pulse.png" alt="logo">
</a>
<button id="submenu">
<span></span>
<span></span>
<span></span>
</button>
<!--Menu Links-->
<ul class="menu-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
<ul class="menu-right">
<li class="menu-cta">Get Started</li>
</ul>
</div>
</header>
The active class here represents the responsive menu icon.
Any help is highly appreciated.
Thanks!

By using the addEventListener you can watch the click event. After clicking the button, the third line below will toggle between adding and removing the class 'active' on the id="header"
document.getElementById("submenu").addEventListener("click", function(event) {
event.preventDefault();
document.getElementById("header").classList.toggle("active");
});

Hamburger menu doesn't close after click on anchor tag

After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover{
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px){
.netflix-logo{
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

You need to attach an event listener to each <a> element.
const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
const netflix_btns = document.querySelectorAll('.netflix-list a');
netflix_open_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add('visible')
});
});
netflix_close_btn.addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
var length = netflix_btns.length;
for (let x = 0; x < length; x++) {
netflix_btns[x].addEventListener('click', () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove('visible')
});
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform .3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: .4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: .2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: .2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: .4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width:768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i>Open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button class="netflix-nav-btn netflix-close-btn">
<i class="fas fa-times"></i>Close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
Danish<img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

for that you will have to create a function which you can call every time you click a link!
const netflix_open_btn = document.querySelector(".netflix-open-btn");
const netflix_nav = document.querySelectorAll(".netflix-nav");
netflix_open_btn.addEventListener("click", () => {
netflix_nav.forEach(nav_el => {
nav_el.classList.add("visible");
});
});
function closeTab() {
netflix_nav.forEach(nav_el => {
nav_el.classList.remove("visible");
});
}
.netflix-text {
text-transform: uppercase;
}
.netflix-list li a:hover {
color: #d6aa55;
}
.netflix-nav-btn {
border: 0;
background: transparent;
cursor: pointer;
font-size: 20px;
z-index: 10;
}
.netflix-open-btn {
position: fixed;
top: 30px;
left: 10px;
z-index: 10;
}
.netflix-nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 10;
}
.netflix-nav.visible {
transform: translateX(0);
}
.netflix-nav-black {
background-color: black;
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: 0.4s;
}
.netflix-nav-black.visible {
transition-delay: 0s;
}
.netflix-nav-red {
background-color: rgb(214, 170, 85);
transition-delay: 0.2s;
width: 95%;
}
.netflix-nav-red.visible {
transition-delay: 0.2s;
}
.netflix-nav-white {
background-color: #fff;
padding: 40px;
position: relative;
transition-delay: 0s;
width: 95%;
}
.netflix-nav-white.visible {
transition-delay: 0.4s;
}
.netflix-close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.netflix-logo {
width: 245px;
}
#media (max-width: 768px) {
.netflix-logo {
width: 197px;
}
}
.netflix-list {
list-style-type: none;
padding: 0;
}
.netflix-list li {
margin: 20px 0;
}
.netflix-list li a {
color: rgb(34, 31, 31);
font-size: 19px;
text-decoration: none;
text-transform: uppercase;
}
.netflix-list ul {
list-style-type: none;
padding-left: 20px;
}
<button class="netflix-nav-btn netflix-open-btn">
<i class="fas fa-bars fa-2x"></i> open
</button>
<div class="netflix-nav netflix-nav-black">
<div class="netflix-nav netflix-nav-red">
<div class="netflix-nav netflix-nav-white">
<button
onclick="closeTab()"
class="netflix-nav-btn netflix-close-btn"
>
<i class="fas fa-times"></i>close
</button>
<img class="netflix-logo" src="images/GOLD.png" alt="Logo" />
<ul class="netflix-list">
<li>
<a onclick="closeTab()" href="index-en.php" class="gold">Home</a>
</li>
<li><a onclick="closeTab()" href="#about">About</a></li>
<li><a onclick="closeTab()" href="#services">Services</a></li>
<li>
<ul>
<li>Tattoo</li>
<li>Beauty</li>
<li>Piercing</li>
</ul>
</li>
<li>Contact</li>
<li>
<a href="index.php">Danish</a
><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
</li>
</ul>
</div>
</div>
</div>

Meybe it doesnt close because there is no page change, thus no reload.
You could use some js to close it manually. Your example there is not close function related to item click. Ex.:
netflix_nav.addEventListener('click', () => {
netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});