We Keep Coding

The dropdown button is not working Not everyone is working Only one item accepts a javascript event

https://codepen.io/MohamedSamehAhmed/pen/NWMVaEb
On the page, I have three buttons to open the drop-down menu, and the problem is that only the first works and the rest does not
HTML Code:
<nav class="nav-bar">
<div class="logo">
Logo
</div>
<ul class="nav-links">
<li>Home</li>
<li>
<a class="drop-menu-btn" href="#">Product <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<ul class="drop-menu">
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
</ul>
</li>
<li>News</li>
<li>Tips</li>
<li>
<a class="drop-menu-btn" href="#">About Us <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<ul class="drop-menu">
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
</ul>
</li>
<li>
<a class="drop-menu-btn" href="#">Gallery <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<ul class="drop-menu">
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
CSS Code:
:root {
--greenColor:#409a4d;
--whiteColor: #ffffff;
--blackColor:#212121;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans";
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
/* nav bar */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
background-color: #ffffff;
-webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
padding: 14px 20px;
}
.nav-bar .logo a {
color: var(--greenColor);
font-weight: 500;
font-size: 25px;
}
.nav-bar .nav-links {
display: flex;
align-items: center;
gap: 50px;
}
.nav-bar .nav-links li a {
font-size: 18px;
font-weight: 400;
color: var(--blackColor);
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-ms-transition:all 3s ease;
-o-transition:all 3s ease;
position: relative;
}
.nav-bar .nav-links li {
position: relative;
display: block;
}
.nav-bar .nav-links li .drop-menu {
display: none;
position: absolute;
top: 43px;
text-align: center;
filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
background-color: #ffffff;
-webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
animation: drop .3s;
-webkit-animation: drop .3s;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.nav-bar .nav-links li .drop-menu.active {
display: block;
width: 100%;
height: 180px;
}
.nav-bar .nav-links li .drop-menu-btn i.rotated {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.nav-bar .nav-links li .drop-menu >li {
margin-bottom: 12px;
}
JS Code:
On the page, I have three buttons to open the drop-down menu, and the problem is that only the first works and the rest does not
const dropMenuBtn = document.querySelector('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.addEventListener('click', () => {
dropMenu.classList.toggle('active')
icon.classList.toggle('rotated')
});
console.log(dropMenuBtn)

As Richard mentioned, if you're using JQuery this becomes easier as you could use something like:
const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
$(dropMenuBtn).click(function(){
$(this).closest("li").find(".drop-menu").toggleClass("active");
});
If you want to stick with pure JavaScript, something like this would work:
const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.forEach(item => {
item.addEventListener('click', event => {
var thisDD = event.target.closest("li").querySelector('.drop-menu');
if (thisDD.classList.contains("active")) {
thisDD.classList.remove("active");
}
else {
thisDD.classList.add("active");
}
});
});

Welcome!
Since you tagged jQuery, here is a possible solution:
$('.drop-menu-btn').each((i, btn) => {
$(btn).on('click', () => {
$(btn).next('.drop-menu').toggle();
});
});
try it out on codepen

Why my JS code isnt enabling the Nav list toggle

https://codepen.io/brunhild_912/pen/MWQPErp
Here is my code. I am trying to enable the nav list toggle, but its not happening. Why? Any guidance or tips over this issue ae welcomed. I have tried many options but its being stubborn unfortunately.
HTML
<button type="button" class="nav-toggler">
<span></span>
</button>
<!--Navbar-->
<nav class="nav">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
CSS
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.header .nav-toggler.active{
position: absolute;
right: 0;
z-index: 1;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transform: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav .open{
transform: translateX(0%);
}
JavaScript
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle(".active");
document.querySelector(".nav").classList.toggle(".open");
}

The first issue you have is that you need to remove the . (period) from your class references (toggle(".active")). Making your toggleNav method like:
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector(".nav").classList.toggle("open");
}
Also, in your css you reference an object with a .header class that does not exist. So you would need to wrap your entire html with:
<div class='header'>
... [YOUR HTML CODE]
</div>
Also, in your css your declaration:
.header .nav .open
Should be:
.header .nav.open
You need a bit of css work for it to function smoothly but this should point you in the right direction.

There are some JS and css issues in your code. check following code.
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector(".nav").classList.toggle("open");
}
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transition: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav.open{
transform: translateX(0%);
}
<div class="header">
<button type="button" class="nav-toggler">
<span></span>
</button>
<!--Navbar-->
<nav class="nav">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
</div>

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);
function toggleNav(){
navToggler.classList.toggle("active");
document.querySelector("nav").classList.toggle("open");
}
.header .nav-toggler{
height: 40px;
width: 44px;
margin-right: 15px;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.header .nav-toggler.active{
position: absolute;
right: 0;
z-index: 1;
}
.header .nav{
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 280px;
background-color: var(--main-color);
box-shadow: var(--shadow);
overflow-y: auto;
padding: 80px 0 40px;
transform: transform 0.5s ease;
transform: translateX(100%);
}
.header .nav.open{
transform: translateX(0%);
}
<div class="header">
<button type="button" class="nav-toggler active">
<span>button</span>
</button>
<!--Navbar-->
<nav class="nav open">
<ul>
<li class="nav=item">Home</li>
<li class="nav=item">About</li>
<li class="nav=item">Menu</li>
<li class="nav=item">Testimonials</li>
<li class="nav=item">Team</li>
<li class="nav=item">Contact</li>
</ul>
</nav>
</div>
Problems in code
classList.toggle(".active"); remove . in string like classList.toggle("active");
add <div> main div in side code class is .header
remove space in between .header .nav .open like- .header .nav.open in css

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

Is there a solution for this button problem?

I am building up my skills by designing a mini web pag
so I started the navigation bar .
The button "Template" is supposed to change the view of the and display the lists but when I click it nothing happens.
Can anyone help me ?
The code:
html:
<div class="menu-toggle">
<h1 id="logo">PROTOCOL</h1>
<li class="right table" id="table"><a class="list template" href="#template" >☰</a></li>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul id="navigate" class="navigate">
<li><a class="list home" href="#home"> Home</a></li>
<li><a class="list" href="#conntacting">Contact us</a></li>
<li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
<li class="right"><a class="list" href="#logging">Log in</a></li>
</ul>
</nav>
CSS:
I designed my navigation bar to be displayed when the user press the "template" button
and hide it again by pressing the same button.
#media screen and ( max-width : 675px){
.container{
position: relative;
}
.menu-toggle{
text-align: center;
float: none;
display: block;
}
.template{
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
li.table{
left: 80px;
height: 20px;
}
.nav{
height: 90px;
}
.template:hover{
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
.navigate,.active{
text-align: center;
display: grid;
grid-template-columns: auto;
background-color: #b00000;
margin: 0;
width: 100%;
position: absolute;
top:90px;
transition: all 0.5 ease;
left: 100%;
}
li.right{
display: table;
padding: 0;
}
.menu-toggle.bar{
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.active{
text-align: center;
display: grid;
grid-template-columns: auto;
background-color: #b00000;
margin: 0;
width: 100%;
position: absolute;
top:90px;
transition: all 0.5 ease;
}
}
JavaScript:
I brought the button "template" and "ul" by it ids
var template = document.getElementById('template');
var nav = document.getElementById('navigate');
template.onclick = function () {
if (nav.className === ('navigate')) {
nav.className += 'active';
} else {
nav.className = 'navigate';
};

You can use classList.toggle method.
Also, to tidy up things, I've removed the list buttons, changed menu font color to white, and removed the duplicated CSS on classes navigate and active: now .active just displays the navigation menu.
(The navigation menu was exploding the width when opened, and it was clobbering the menu icon, so I just removed position: absolute; and width: 100% from it)
Far from done here. Try to change things in steps, and to study the css rules on MDN, instead of doing many things at once.
var template = document.querySelector('.template');
var nav = document.querySelector('.navigate');
template.onclick = function() {
nav.classList.toggle('active');
};
#media screen and ( max-width: 675px) {
.container {
position: relative;
}
.menu-toggle {
text-align: center;
float: none;
display: block;
}
.template {
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
li.table {
left: 80px;
height: 20px;
}
.nav {
height: 90px;
}
.template:hover {
display: inline;
float: right;
padding: 0 40px;
margin: auto;
}
.navigate {
text-align: center;
display: none;
background-color: #b00000;
list-style: none;
margin: 0;
left: 0;
top: 90px;
transition: all 0.5 ease;
}
a.list:not(.template) {
text-decoration: none;
color: white;
}
li.right {
display: table;
padding: 0;
}
.menu-toggle.bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.active {
display: grid;
grid-template-columns: auto;
}
<div class="menu-toggle">
<h1 id="logo">PROTOCOL</h1>
<li class="right table" id="table"><a class="list template" href="#template">☰</a></li>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav id="navigate">
<ul class="navigate">
<li><a class="list home" href="#home"> Home</a></li>
<li><a class="list" href="#contacting">Contact us</a></li>
<li class="right"><a class="list sign-up" href="#signing">Sign up</a></li>
<li class="right"><a class="list" href="#logging">Log in</a></li>
</ul>
</nav>

your code has many mistakes please create button having template class.
however i updated your javascript for current use
template.onclick = function () {
if (nav.className === 'navigate') {
nav.classList.remove('navigate')
nav.className = 'active';
}
else {
nav.classList.remove('active')
nav.className = 'navigate';
}
}
}

Javascript event listener overwrites another event listener

so I am trying to create a multilevel navigation for a mobile device and I am running into some issues. I am still learning javascript so please bare with me. Here is a link to the codepen:
https://codepen.io/maciekmat/pen/yLepYKq
So when you press the menu in the top right, a menu will open down. Then I would like to be able to go into sub categories. For example click Test Open, .active class will be assigned, and another menu slides in. Now I would like to have a go back button that essentially removes the .active class.
However what I think is happening, the event listener listens to the whole parent, and anywhere you click inside the subnavigation, it registers it as a click, and runs the .active class. When I click to go back, its like .active is removed and applied back instantly. Any help please?
I tried doing the event.currentEvent !== event.target if statement but had no luck
const nav = document.getElementById('menuIcon')
const dropdown = document.getElementById('menuDropdown')
nav.addEventListener('click', function() {
dropdown.classList.toggle('nav-is-toggled')
});
const grabNavLinks = document.querySelectorAll('.sub-nav-link');
const grabBackLinks = document.querySelectorAll('.nav-link.back');
const subNavLinks = Array.from(grabNavLinks);
const backLinks = Array.from(grabBackLinks);
for (let i = 0; i < subNavLinks.length; i++) {
subNavLinks[i].addEventListener("click", function() {
this.querySelector('.sub-nav').classList.add('active');
});
}
for (let i = 0; i < backLinks.length; i++) {
backLinks[i].addEventListener("click", function() {
document.querySelector('.sub-nav').classList.remove('active');
});
}
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Open sans", sans-serif;
background: #F9F9F9;
box-sizing: border-box;
}
a, p, h1, h2, h3 {
margin: 0;
padding: 0;
text-decoration: none;
}
ul, li {
padding: 0;
margin: 0;
}
header {
background: white;
padding: 24px 30px;
display: flex;
flex-direction: column;
z-index: 10;
position: relative;
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-nav .logo {
background: url("images/tcb-logo-brand.svg") no-repeat;
width: 150px;
height: 50px;
background-size: contain;
background-position: center;
}
.top-nav .navigation {
display: flex;
justify-content: space-between;
width: 132px;
height: 26px;
}
.top-nav .navigation .nav-item {
width: 23px;
height: 26px;
margin-left: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.top-nav .navigation .nav-item.menu {
background-image: url("images/menu-icon.svg");
}
.top-nav .navigation .nav-item.notification {
background-image: url("images/bell-icon.svg");
}
.top-nav .navigation .nav-item.my-account {
background-image: url("images/acc-icon.svg");
}
.search {
margin-top: 16px;
}
.search input[type=search] {
outline: none;
border: none;
background: #F6F6F6;
width: 100%;
height: 50px;
font-size: 16px;
padding: 10px 0 10px 20px;
background-image: url("images/search-icon.svg");
background-repeat: no-repeat;
background-position: right 15px top 50%;
}
.search input[type=search]::placeholder {
color: #B7B7B7;
}
span.nav-title {
display: none;
}
nav.main-nav {
width: 100%;
background: #F6F6F6;
transform: translateY(-100%);
z-index: 0;
position: relative;
transition: all 0.3s ease-in-out;
position: absolute;
padding-bottom: 50px;
overflow: hidden;
}
nav.main-nav ul {
padding-top: 2px;
position: relative;
}
nav.main-nav li {
list-style: none;
}
nav.main-nav a {
color: #6D6D6D;
font-size: 16px;
width: 100%;
height: 100%;
display: block;
padding: 18px 30px;
border-bottom: 1px solid #E9E9E9;
}
nav.main-nav li.nav-link.arrow {
background: url("images/right-arrow.svg") no-repeat;
background-position: right 30px top 50%;
}
nav.main-nav ul.sub-nav {
background: #cecece;
width: 100%;
display: flex;
flex-direction: column;
transform: translateX(100%);
overflow: hidden;
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: transform 0.2s ease;
}
.sub-nav-link > .sub-nav.active {
transform: translateX(0);
visibility: visible;
opacity: 1;
}
nav.nav-is-toggled {
position: static;
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease-in-out;
}
<header>
<div class="top-nav">
<div class="logo"></div>
<div class="navigation">
<div id="menuIcon" class="nav-item menu">test</div>
<div class="nav-item notification"></div>
<div class="nav-item my-account"><span class="nav-title">My Account</span></div>
</div>
</div>
<div class="search">
<input type="search" name="search" id="search" placeholder="Search by store...">
</div>
</header>
<nav id="menuDropdown" class="main-nav">
<ul class="main-nav-ul">
<li class="nav-link">Test</li>
<li class="nav-link arrow sub-nav-link">Test Open
<ul class="sub-nav">
<li class="nav-link back">Go Back</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
</ul>
</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
<li class="nav-link arrow sub-nav-link">Test Open
<ul class="sub-nav">
<li class="nav-link back">Go Back</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
</ul>
</li>
<li class="nav-link">Test</li>
</ul>
</nav>
<script src="navigation.js"></script>

Go read on event bubbling and how it bubbles through the DOM tree. However due to the way it passes from parent to child (that's it bubbles down the tree) you should call event.stopPropagation(); So that the previous event doesnt bubble into the backLinks event listener.
This is what you should do
for (let i = 0; i < backLinks.length; i++) {
backLinks[i].addEventListener("click", function(event) {
event.stopPropagation();
document.querySelector('.sub-nav').classList.remove('active');
});
}