I'm exploring the process of designing burger menus for the mobile version of my site. I've successfully created a basic burger menu with some JavaScript assistance, but I encountered an overflow issue. The burger menu functions properly, but there is a horizontal scroll when it's not in use. I know that using position: relative and overflow: hidden could resolve this problem, but I'm unsure which element to apply these properties to. When I attempted to apply them to the parent header element, the burger menu expanded to the full height of the header. I'm struggling to find a solution to prevent this from happening.
HTML:
`<header class="header">
<div class="header__container">
<a href="#"
><div class="logo__block">
<img src="img/logo.svg" alt="Logo" /></div
></a>
<nav class="header__nav nav">
<ul class="nav__list">
<div class="burger-menu__exit">X</div>
<li class="nav__item">
<a href="#" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Features</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Pricing</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Blog</a>
</li class="nav__item nav-btn">
</ul>
</nav>
<a class="header-btn" href="#">Get Started</a>
<div class="burger-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</div>
</header>`
CSS:
`body {
font-family: "Libre Franklin", sans-serif;
}
[class$="__container"] {
max-width: 1270px;
margin: 0 auto;
padding: 0 15px;
}
.header__container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 60px;
padding-top: 40px;
padding-bottom: 60px;
}
.header__container:before{
position: relative;
}
.logo__block {
display: flex;
align-items: center;
}
.nav {
margin-left: auto;
}
.nav__list {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.nat__item {
}
.nav-btn {
display: none;
}
.nav__list > li:not(.nav__item:last-child) {
margin-right: 100px;
}
.nav__item:last-child {
margin-right: 79px;
}
.nav__link {
font-style: normal;
font-weight: 400;
font-size: 20px;
}
.nav__link:hover {
border-bottom: 2px solid black;
}
.btn__block {
max-width: 286px;
}
.header-btn {
width: 211px;
text-align: center;
border-radius: 10px;
font-style: normal;
font-weight: 500;
font-size: 20px;
color: white;
background-color: #ff7143;
transition: 0.3s;
}
.header-btn:hover {
background-color: #d1542b;
}
.burger-menu {
display: none;
margin-left: 10px;
cursor: pointer;
}
.burger-menu__exit {
display: none;
}
.line {
width: 35px;
height: 2px;
background-color: black;
margin-top: 10px;
}
.line1 {
margin-top: 0;
}
@media (max-width: 1309px) {
[class$="__container"] {
max-width: 1103px;
}
}
@media (max-width: 1129px) {
[class$="__container"] {
max-width: 1000px;
}
.nav__list > li:not(.nav__item:last-child) {
margin-right: 50px;
}
.nav__item:last-child {
margin-right: 79px;
}
}
@media (max-width: 988.98px) {
[class$="__container"] {
max-width: none;
}
.burger-menu {
display: block;
}
.header__nav {
background-color: #5454d4;
z-index: 9999;
}
.nav {
position: absolute;
top: 0;
left: 100%;
right: -100%;
z-index: 999;
min-width: 375px;
height: 100vh;
padding-top: 30px;
color: #ff7143;
transition: 1s;
}
.nav__list {
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
}
.nav__list a {
color: #ff7143;
}
.nav__list a:hover {
border-bottom: 2px solid #ff7143;
}
.nav__list > li:not(.nav__item:last-child) {
margin-right: 0;
}
.nav__item:last-child {
margin-right: 0;
}
.header-btn {
margin-left: auto;
}
.burger-menu__exit {
display: block;
cursor: pointer;
position: absolute;
top: 0;
right: 18px;
font-size: 40px;
}
}
@media (max-width: 512.98px) {
.header-btn {
display: none;
}
}
@media (max-width: 369.98px) {
.nav {
min-width: 100%;
}
}`
JS:
const mobileNav = document.querySelector(".nav");
const headerButton = document.querySelector(".header-btn");
const headerContainer = document.querySelector(".header__container");
document.querySelector(".burger-menu").addEventListener("click", () => {
mobileNav.style.right = 0;
});
document.querySelector(".burger-menu__exit").addEventListener("click", () => {
mobileNav.style.right = -100 + "%";
});
Appreciate the assistance!