I'm working on creating a responsive menu. Everything is functioning well, but I have encountered an issue when the screen size reaches 1024px. I want to be able to click on the hamburger menu and align the items in the center, with each item displayed on a separate row beneath the navbar. However, my items are not displaying on the second line after clicking the hamburger menu.
Here's the code snippet: https://codepen.io/S4UCY/pen/VwamrBb
I am aiming for something similar to this example: https://codepen.io/ladyareum/pen/eJVoPP
const hamburger = document.getElementById('hamburger');
const menuUL = document.getElementById('menu-list');
hamburger.addEventListener('click', () => {
menuUL.classList.toggle('show');
});* GENERAL */
html, body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* * {
outline:2px solid red;
} */
body {
font-family: 'Montserrat',sans-serif;
font-size: 100%;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after{
clear: both;
}
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
/* NAVBAR */
.navbar {
border: none;
font-size: 1.1428571428571428em;
z-index: 1000;
background-color: #cc9efd;
}
...
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lorem</title>
<link rel="stylesheet" href="css/reset.css">
...
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
...
</html>