hamburger toggler animation doesn't work immediately after i refresh the page, it starts working after i hit it one time. the mainMenu appears without animation the first time i hit the openMenu. i dont understand how its possible working after the second time i hit it. there is something i am missing probably. why is this happening?
const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
mainMenu.style.display = "flex";
mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
mainMenu.style.top = "-100%";
});.row .left {
height: 98vh;
background-color: #5a2a19;
}
.row .right {
height: 98vh;
background-color: #ff640b;
}
.row .right nav .openMenu {
font-size: 3em;
margin: 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu {
background-color: #ff640b;
height: 100vh;
display: none;
position: fixed;
top: 0;
right: 0;
left: 50%;
z-index: 10;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: top 1s ease;
transition: top 1s ease;
list-style: none;
}
.row .right nav .mainMenu li a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #5a2a19;
font-size: 1.5em;
font-weight: bold;
}
.row .right nav .mainMenu li a:hover {
color: #e6e8de;
}
.row .right nav .mainMenu .closeMenu {
font-size: 2em;
margin: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.row .right nav .mainMenu .icons i {
display: inline-block;
padding: 12px;
font-size: 2.2em;
color: #5a2a19;
cursor: pointer;
}
.row .right nav .mainMenu .bi-facebook:hover {
color: #4267b2;
}
.row .right nav .mainMenu .bi-instagram:hover {
color: #e1306c;
}
/*# 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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Bees cafe</title>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
<script src="js/index.js" defer></script>
</head>
<body>
<header>
<div class="row">
<div class="col-12 col-md-6 left"></div>
<div class="col-12 col-md-6 right">
<nav>
<div class="openMenu"><i class="bi bi-list"></i></div>
<ul class="mainMenu">
<li><a href="#">lala</a></li>
<li><a href="#">lala</a></li>
<li><a href="#">lala</a></li>
<div class="closeMenu"><i class="bi bi-x-lg"></i></div>
<span class="icons">
<i class="bi bi-facebook"></i>
<i class="bi bi-instagram"></i>
</span>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>