You have the menu toggle in place but you called it something other than #to toggle so the JS needs to change to reflect that. You called him #mobile-menu.
You haven’t actually styled the burger, so you need to grab the styles that create the burger from where you saw this code.
Once in place, you would set it to display:none by default, then use a media query at the required width to display it. At the same point in the media query, you should redefine the navigation so that it is below the header, as is usually required.
Here’s a basic start, but as you learn, I’ll leave it up to you to fill in the gaps.
#mobile-menu {
display: none;
height: 50px;
width: 100px;
background: red; /* just for testing - you need to find the correct css for this*/
}
/* I've used 800px as the trigger point but this needs to change based on the design */
@media screen and (max-width: 800px) {
#mobile-menu {
display: block;
}
.nav {
display: none;
}
.active + .nav {
display: block;
}
/* Now from here you need to style the way you want that dropdown to look on small screen.
This would probably be using absolute positioning to show the menu over any other content*/
/* e.g. just for starters*/
header {
position: relative;
}
.nav {
position: absolute;
left: 0;
top: 100%;
}
/* now adjust all the styling for the list elements as required*/
/* ??? */
}
The js is changed to reflect the correct hamburger id.
const toggle = document.getElementById("mobile-menu");
toggle.onclick = function () {
toggle.classList.toggle("active");
};
It’s a basic start for you to get it working, so all you have to do now is style it to your needs 🙂