Overflow issue with burger menu - html

Question

I'm trying to learn how to create burger menus for the mobile version of the site. I've managed to create a simple burger-menu with a little help of js, but I faced the problem with overflow. Burger works fine, but it has a sidescroll when it's unactive. I understand that it could be fixed with position: relative and overflow: hidden, but I can't figure out to which block I should apply those parameters. When I try to apply this parameters to the parent header block, burger menu becomes the header's hight. Can't really understand how to avoid it.
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">
Home
</li>
<li class="nav__item">
Features
</li>
<li class="nav__item">
Pricing
</li>
<li class="nav__item">
Blog
</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 + "%";
});
Thanks for the help!

Answer 1

Issue was fixed by adding the different navigation for burger outside the header block and adding the position: relative; overflow: hidden; to the html and body.