I have a website that by way of media query shows hamburger button when under so many px. When you click hamburger it shows vertically stacked menu options (pretty straight forward). I have an event listener that is supposed to show/hide the mobile menu when one the items is clicked, (so when user clicks something the dropdown menu doesn't just stay there).
These items have id="nav-mobile" and app.js targets them accordingly.
My issue is that when one link is clicked it successfully hides the dropdownworks and the other one does not. I have literally copied and pasted the html files to be identical to one another, save the page title and an h1 contents.
Also I'm using Swup js for page transitions, which seems to have its own set of problems but as far as I can tell isn't the issue. I'm new to JS so I'm hoping this is some glaring novice mistake.
Here is music.html (this one does what its supposed to for some reason)
<!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">
<script defer src="app.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Misenheimer | Music</title>
</head>
<body>
<header>
<div class="nav-container">
<nav>
<div class="icon-container">
<div class= nav-icon><a href="/index.html" class="computer-link"><img class="computer-icon" src="./images/computer-4.png" alt="computer icon"></img></a></div>
</div>
<button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
<ul class="nav-menu" id="nav-menu">
<li class="nav-item"><a href='/music.html' class=nav-link>music.</a></li>
<li class="nav-item"><a href='/about.html' class=nav-link>about.</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/music.html' class=nav-link>music</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/about.html' class=nav-link>about</a></li>
</ul>
</nav>
</div>
</header>
<main id="swup" class="transition-fade">
<h1>Music</h1>
</main>
</body>
</html>
Here is about.html (this does not hide the menu after it is selected)
<!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">
<script defer src="app.js"></script>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Misenheimer | About</title>
</head>
<body>
<header>
<div class="nav-container">
<nav>
<div class="icon-container">
<div class= nav-icon><a href="/index.html" class="computer-link"><img class="computer-icon" src="./images/computer-4.png" alt="computer icon"></img></a></div>
</div>
<button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
<ul class="nav-menu" id="nav-menu">
<li class="nav-item"><a href='/music.html' class=nav-link>music.</a></li>
<li class="nav-item"><a href='/about.html' class=nav-link>about.</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/music.html' class=nav-link>music</a></li>
<li id="nav-mobile" class="nav-item-mobile" ><a href='/about.html' class=nav-link>about</a></li>
</ul>
</nav>
</div>
</header>
<main id="swup" class="transition-fade">
<h1>About</h1>
</main>
</body>
</html>
Here is my JS file:
const swup = new Swup();
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
const navItem = document.getElementById('nav-mobile');
hamburger.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
// This toggles mobile menu when a menu item is clicked.
navItem.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
Here is CSS (including this in case there is issue with Swup that someone may know of):
:root {
--bghome: black;
--bgmusic: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
--bgabout: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/*-----------------------------Navigation---------------------------*/
.nav-container {
width: 100%;
padding: 0;
margin: 0;
border: 0;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
margin: 0;
background-color: #eee;
}
/* Home page icon styles */
.icon-container {
display: flex;
align-items: center;
justify-items: center;
height: 60px;
padding: 0;
margin: 0;
}
.nav-icon {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 120px;
padding: 0;
transition: 0.6s ease;
}
.nav-icon:hover {
transition: 0.6s ease;
background-color: #048383;
}
.computer-link {
padding: 0px 40px;
}
.computer-icon {
padding: 0;
transition: 0.5s ease;
}
.computer-icon:hover {
transform: rotate(5deg);
transition: 0.5s ease;
}
/* Navigation Menu (excluding home page icon) */
.nav-item-mobile {
display: none;
}
.nav-menu {
display: flex;
align-items: center;
justify-items: center;
height: 60px;
padding: 0;
margin: 0;
list-style-type: none;
}
.hamburger {
display: none;
margin-left: auto;
margin-right: 20px;
padding: 10px;
background-color: transparent;
border: none;
color: #000;
font-size: 30px;
cursor: pointer;
}
.hamburger:focus {
outline: none;
}
.nav-item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 120px;
padding: 0;
transition: 0.6s ease;
}
.nav-item:hover {
transition: 0.6s ease;
background-color: #048383;
}
.nav-link {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: inherit;
font-family: Arial, Helvetica, sans-serif;
font-size: 23px;
color: #444;
text-decoration: none;
}
/*----- Page Transition ------ */
.transition-fade {
transition: 0.6s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}
@media screen and (max-width: 750px){
.nav-menu {
display: none;
flex-direction: column;
}
.nav-item {
display: none;
}
.nav-item-mobile {
display: flex;
width: 100%;
}
.nav-menu.show {
display: flex;
width: 100%;
}
.hamburger {
display: block;
}
}
I figured out a way to make it work. Again, I'm new to JS. So, maybe this is just a band-aid. What I did was make separate eventhandlers for each link (each having a different id to target). This solved my problem. What seemed to be happening was only the first item with targeted id was running the script. Maybe that's a JS thing. You can't have multiple objects with the same id, unlike a class.