Currently, I am facing an issue with the hamburger menu not responding on my mobile device. Oddly enough, it does work when I resize my browser window to mimic a mobile size. There seems to be a glitch happening, but I'm struggling to pinpoint the exact cause. It's important to note that due to this project being for school, I am limited in using a lot of classes or IDs.
Here is the code snippet in question:
<nav class="navbar">
<a href="index.html">
<img src="images/spotify.svg" alt="Logo van spotify">
</a>
<!-- Use span for hamburger bars -->
<a href="#" onclick="myFunction()" class="toggle-button">
<span></span>
<span></span>
<span></span>
</a>
<div id="active" class="navbar-links">
<ul>
<li><a href="premium.html">Premium</a></li>
<li><a href="premium.html">Help</a></li>
<li><a href="premium.html">Downloaden</a></li>
<li><a href="premium.html">Account</a></li>
<li><a href="premium.html">Uitloggen</a></li>
</ul>
</div>
</nav>`
JS code snippet:
`function myFunction () {
document.getElementById("active").classList.toggle("show")
}`
What I've attempted:
I experimented with other JavaScript functions, but they mostly broke my code. One did seem to somewhat work though:
`function myFunction() {
var x = document.getElementById("active");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
Although this code appeared to function correctly on desktop and mobile devices, it caused my navbar links to disappear entirely. This unexpected behavior left me puzzled as to why precisely it was happening. As I am a novice in this field, any assistance would be greatly appreciated.
You can find my GitHub repository here: https://github.com/Koayz/Spotify-Bryan-van-de-Pol And my website is live at: