I'm doing an hamburger menu which has to open when toggled. The thing is, I can close and open it without any problem but it remains open on page load. Which means it is already toggled when you open the page. Hope this explanation is clear. I gace all the code I have for this feature. Please Can someone help ?
JS
const hamburger = document.querySelector('.navbar__hamburger');
const links = document.querySelector('.nav-primary');
hamburger.addEventListener('click', ()=> {
links.classList.toggle('nav-primary--hide');
});
},
};
HTML
<header class="header">
<div class="header-color">
<div class="container">
<div class="logo__wrapper">
<a class="link__logo" href="index.html">
<div class="header__logo__ctn">
<img class="header__logo" src="./assets/svg/logo-svg-ghosts-02.svg"/>
</div>
<p class="header__title">ghosts team</p>
</a>
</div>
<div class="navbar__hamburger">
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
<span class="navbar__hamburger__line"></span>
</div>
<nav class="nav-primary nav-primary--hide">
<ul class="main-menu">
<li class="menu-item"><a class="menu-item-link presentation" href="index.html">présentation</a></li>
<li class="menu-item"><a class="menu-item-link" href="airsoft.html">l'airsoft</a></li>
<li class="menu-item"><a class="menu-item-link" href="terrain.html">terrain</a></li>
<li class="menu-item"><a class="menu-item-link" href="reglement.html">règlement</a></li>
<li class="menu-item"><a class="menu-item-link" href="equipe.html">équipe</a></li>
<li class="menu-item galerie"><a class="menu-item-link" href="gallery.html">galerie photos</a></li>
</ul>
<div class="social__wrapper__ctn">
<ul class="social__wrapper">
<li class="social__item"><a class="social__link" href="/" target="_blank"><span>Suivez nous sur Facebook:</span><i class="fa-brands fa-facebook-f"></i></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
CSS
.container {
width: 100%;
max-width: 1550px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin: 0 auto;
@media screen and (max-width: 1183px) {
align-items: flex-start;
flex-wrap: wrap;
padding: 15px 30px;
}
}
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
.header-color {
background-color: rgba($color: $darkGrey, $alpha: 0.7);
@media screen and (max-width: 1183px) {
background-color: $darkGrey;
}
.logo__wrapper {
@media screen and (max-width: 359px) {
flex: 70%;
}
@media screen and (min-width: 360px) and (max-width: 1183px) {
flex: 80%;
}
.link__logo {
text-decoration: none;
display: flex;
align-items: center;
max-width: 210px;
.header__logo__ctn {
padding-right: 5px;
.header__logo {
height: 56px;
}
}
.header__title {
color: #ffffff;
font-family: $calvous;
}
}
}
.nav-primary {
display: flex;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 1183px) {
flex-direction: column;
justify-content: flex-start;
// height: 100vh;
}
.nav {
display: flex;
justify-content: space-between;
letter-spacing: 2px;
list-style-type: none;
@media screen and (max-width: 1183px) {
flex-direction: column;
}
.menu-item {
text-decoration: none;
@media screen and (max-width: 1183px) {
display: flex;
padding: 8px 0;
}
&::after {
content: url("../../images/assets/svg/bckg-links.png");
@media screen and (max-width: 1183px) {
content: none;
}
}
.presentation {
@media screen and (max-width: 1183px) {
padding: 18px 25px;
}
}
a{
padding: 5px 25px;
color: #ffffff;
font-family: $ubuntuLight;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
&:hover {
border-color: #ceae60;
color: #ceae60;
}
@media screen and (max-width: 1183px) {
font-size: 22px;
padding: 15px 5px;
}
}
}
.menu-item-41 {
&::after {
content: none;
}
}
}
.social__wrapper__ctn {
.social__wrapper {
list-style-type: none;
padding-left: 1em;
.social__item {
@media screen and (max-width: 1183px) {
padding: 10px 0;
}
.social__link {
text-decoration: none;
color: $yellow;
font-family: $ubuntuLight;
&:hover {
border-color: $white;
}
span {
display: none;
@media screen and (max-width: 1183px) {
display: inline;
padding-right: 10px;
}
}
i {
border: 1px solid $yellow;
border-radius: 50%;
width: 25px;
height: 25px;
color: $yellow;
font-size: 15px;
padding: 5px 6.2px;
&:hover {
color: $white;
border-color: $white;
}
}
}
}
}
}
}
.nav-primary--hide {
@media screen and (max-width: 1183px) {
display: none;
}
}
}
.navbar__hamburger {
margin: 10px;
cursor: pointer;
.navbar__hamburger__line {
display: block;
width: 40px;
height: 3px;
margin-bottom: 10px;
background-color: #fff;
}
@media screen and (min-width: 1183px) {
display: none;
}
}
}
.header-pages {
background-image: url("../../images/assets/images/background-fonce.jpg");
position: relative;
}
You just need to remove the nav-primary--hide class in the HTML code. Then it behaves as you want.
Everything else looks fine!