I'm facing an issue with my active navigation bar. Whenever I open the hamburger menu, the main content remains fixed and does not move along with the open navigation menu. I tried searching online for a solution but couldn't find anything helpful. Below is the code snippet I'm working with. Any help in resolving this would be greatly appreciated. What steps can I take to fix it?
Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<header>
<div class="logo">Logo</div>
<div class="hamburger">
<div class="lines"></div>
</div>
<nav class="nav-bar">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function () {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nihil corporis ut praesentium accusantium possimus molestiae reprehenderit quam nostrum distinctio repudiandae iure aliquam repellat unde recusandae quas ipsam. Dicta animi.</p>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
font-size: 100%;
}
/* NAVIGATION */
header {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25em 6.25em;
border-bottom: 1px solid #000;
}
.logo {
width: 50%;
}
.hamburger {
display: none;
}
.nav-bar ul {
display: flex;
}
.nav-bar ul li a {
display: block;
color: #000;
font-size: 1.375em;
padding: 0.4545454545454545em 0.6818181818181818em;
border-radius: 50px;
transition: all 0.5s ease-in-out;
margin: 0 0.2272727272727273em;
}
.nav-bar ul li a:hover {
color: #fff;
background: #ffb038;
}
.fa-solid {
margin-right: 0.6818181818181818em;
vertical-align: middle;
}
@media only screen and (max-width: 1770px) {
.nav-bar ul li a i {
display: block;
}
}
@media only screen and (max-width: 1400px) {
header {
padding: 0px 1.5625em;
}
.hamburger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.lines {
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before,
.lines::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background-color: #ffb038;
border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.lines::before {
transform: translateY(-16px);
}
.lines::after {
transform: translateY(16px);
}
.hamburger.open .lines {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .lines::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .lines::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.nav-bar {
height: 0;
position: absolute;
top: 65px;
left: 0;
right: 0;
width: 100vw;
background: #ffb038;
transition: 0.5s;
overflow: hidden;
}
.nav-bar.active {
height: 28.125em;
transition: all 0.5s ease-in-out;
margin-top: 15px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 5em auto 0 auto;
text-align: center;
transition: all 0.5s ease-in-out;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
display: block;
}
.nav-bar ul li a {
margin-bottom: 0.75em;
}
.nav-bar ul li a:hover {
color: #000;
background: white;
}
}