I just tried to add mmenu light to a simple default website (like in the example https://mmenujs.com/mmenu-light/tutorial.html). The mobile menu is being generated, but the menu itself is still visible and not moved to the right place (sorry - i'm not sure how to describe it in a better way).
What am I missing? Thanks for your help!
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
<title>My webpage</title>
<link href="mmenu-light.css" rel="stylesheet" />
</head>
<body>
<div id="page">
<div id="header">
<a href="#menu">Open the menu</a>
<nav id="menu">
<ul>
<li class="Selected"><a href="/">Home</a></li>
<li><span>About us</span>
<ul>
<li><a href="/about/history/">History</a></li>
<li><a href="/about/team/">The team</a></li>
<li><a href="/about/address/">Our address</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
<div id="content">
<h1>The title</h1>
<p>Some content.</p>
</div>
</div>
<script src="mmenu-light.js"></script>
<script>
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new MmenuLight(
document.querySelector( "#menu" ),
"(max-width: 600px)"
);
const navigator = menu.navigation();
const drawer = menu.offcanvas();
document.querySelector( "a[href='#menu']" )
.addEventListener( "click", ( evnt ) => {
evnt.preventDefault();
drawer.open();
});
}
);
</script>
</body>
</html>```
I found the solution in the demo on github: https://github.com/FrDH/mmenu-light/tree/master/demo
Using the demo from github works. Using the demo from the tutorial doesn't.
I assume it has to do with the following: