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 >
     <div >
   <div >
     <div >
       <a  href="index.html">
         <div >
       <img  src="./assets/svg/logo-svg-ghosts-02.svg"/>
       </div>
       <p >ghosts team</p>
      </a>
     </div>
     <div >
      <span ></span>
      <span ></span>
      <span ></span>
    </div>
     <nav >
        <ul >
          <li ><a  href="index.html">présentation</a></li>
          <li ><a  href="airsoft.html">l'airsoft</a></li>
          <li ><a  href="terrain.html">terrain</a></li>
          <li ><a  href="reglement.html">règlement</a></li>
          <li ><a  href="equipe.html">équipe</a></li>
          <li ><a  href="gallery.html">galerie photos</a></li>
        </ul>
     
     <div >
       <ul >
         <li ><a  href="/" target="_blank"><span>Suivez nous sur Facebook:</span><i ></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;
}

CodePudding user response：

You just need to remove the nav-primary--hide class in the HTML code. Then it behaves as you want.

Everything else looks fine!