Mustard CSS - Hamburger issue - html

Question

I am using the mustard css framework but I am having an issue when resizing my browser. The navigation bar is supposed to drop into a hamburger, the appears but when i click it nothing appears within it. I copied and pasted the mustard exact nav bar but still doesn't work. Am i missing something else I have to link.
My Navigation Bar
<nav class="mynav">
<div class="nav-container">
<div class="nav-logo">
<div>
<img class="mylogo" src="imgs/abs.png" alt="">
</div>
<a class="myfont" href="index.php">Abs'olute Fitness</a>
</div>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</nav>
Mustard Navigation Bar
<nav>
<div class="nav-container">
<div class="nav-logo">
mustard
</div>
<ul class="nav-links">
<li><a class="active" href="/docs/installation">Docs</a></li>
<li>GitHub</li>
<li>Support</li>
</ul>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>Docs</li>
<li>GitHub</li>
<li>Support</li>
</ul>
</div>
</nav>

Answer 1

You need some javascript to toggle appearance. There's jquery example in repository, I'm using vanilla JS for that:
const hide = ((elem) => {
elem.style.display = 'none';
});
const show = ((elem) => {
elem.style.display = 'block';
});
const toggle = document.querySelector('.mobile-menu-toggle');
const menu = document.querySelector('.mobile-menu');
toggle.addEventListener('click', ((e) => {
if (menu.style.display !== 'block') {
e.preventDefault();
e.stopPropagation();
show(menu);
}
}));
document.body.addEventListener('click', ((e) => {
if (menu.style.display === 'block') {
e.preventDefault();
e.stopPropagation();
hide(menu);
}
}));