I've encountered an issue with the script on my website. Despite double-checking everything and following a tutorial closely, it still doesn't seem to work. Any suggestions or ideas?
Here are the links to my GitHub repository and a preview of the website: GitHub Repository Website Preview
The code snippet:
<body>
<div class="navbar">
<div class="container">
<a class="logo" href="index.html"><span>d</span>bogdanski</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu1.svg" alt="menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit1.svg" alt="exit">
<ul class="primary-nav">
<li class="current"><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Social</a></li>
</ul>
<ul class="secondary-nav">
<li class="contact-cta"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<section class="hero">
hero
</section>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
Some SCSS styling:
.navbar {
background: var(--primary-color);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--secondary-color);
font-size: 1.2em;
span {
color: white;
}
}
... (additional styling properties)
}
I've searched for errors, even copied the author's code directly from their repository. The expected behavior is for the mobile menu to display and hide when clicking the hamburger menu icon.