I was trying to do the burger menu and faced some kind of ‘bug’. Burger menu shows up at width less than 780px and when ever it reaches that point all works good exept one thing.
Property transform:translate triggers every time you reach needed width and menu goes back on initial place. Hard to explain, just check the snippet and resize the width. Any suggestions?
let burgerBtn = document.querySelector(".menu_burger");
let menu = document.querySelector(".list");
burgerBtn.addEventListener('click', function() {
burgerBtn.classList.toggle('active');
menu.classList.toggle('active');
});@import url(https://fonts.googleapis.com/css?family=Heebo:regular,500,700,900&display=swap);
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.container {
max-width: 856px;
margin: 0 auto;
}
@media (max-width: 868px) {
.container {
max-width: 970px;
}
}
@media (max-width: 991.98px) {
.container {
max-width: none;
padding: 0 10px;
}
}
.header_wrap {
max-width: 1052px;
margin: 0 auto;
padding: 0 10px;
}
.list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style-type: none;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
height: 70px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 0;
margin: 0;
}
.list_link {
font-size: 20px;
font-weight: 500;
color: black;
font-family: Heebo;
margin: 0 0 0 40px;
}
@media (min-width: 991.98px) {
.list_link:hover {
color: #FF6464;
border-bottom: solid 1px #FF6464;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
}
.menu_burger {
display: none;
}
@media (max-width: 767px) {
.header_wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 70px;
padding: 0 10px 0 10px;
}
.list {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
top: 0;
background: rgba(205, 214, 219, 0.5);
height: 100%;
width: 100%;
overflow: auto;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
}
.list.active {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.list_link {
font-size: 2.5rem;
margin: 20px 0 20px 0;
letter-spacing: 2px;
}
.menu_burger {
display: block;
width: 30px;
height: 20px;
position: relative;
overflow: hidden;
}
.menu_burger span {
width: 30px;
height: 3px;
top: 50%;
left: 50%;
position: absolute;
background-color: black;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 5;
-webkit-transition: ease 0.5s;
transition: ease 0.5s;
}
.menu_burger span:nth-of-type(2) {
top: calc(50% - 5px);
}
.menu_burger span:nth-of-type(3) {
top: calc(50% + 5px);
}
.menu_burger.active span:first-of-type {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.menu_burger.active span:nth-of-type(2) {
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.menu_burger.active span:nth-of-type(3) {
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
}
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="./scss/style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header_wrap">
<ul class="list ">
<li><a class="list_link" href="">Works</a></li>
<li><a class="list_link" href="">Blog</a></li>
<li><a class="list_link" href="">Contact</a></li>
</ul>
<div class="menu_burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main>
</main>
</div>
<script src="/app.js" ></script>
</body>
</html>