How to make work my mobile menu bar ‘display : none’ ‘display : block’

I’ve a navigation menu which dissappears when the breakpoint is 640px and an icon appears. When I click on this icon my menu reopens and it doesn’t close and when I resize the browser it doesn’t back to the normal style. For sure sth doesn’t work in my if satements.

Thanks for your help!

document.body.addEventListener('click', function (e) {
  if (e.target.matches('.fa-grip-lines')) { 
    let elem = document.querySelector('#menuMobile');
    if (menuMobile.style.display === 'none'&& window.innerWidth < '640') {
      elem.classList.remove("menuMobile");
      elem.classList.add("mobile");
      sousMenu();
    } 
    else if (window.innerWidth > '640' ) {
    elem.style.display = 'block';
    } 
    else
    { 
      elem.style.display = 'none';
      elem.classList.remove("mobile");
      elem.classList.add("menuMobile");
      
    }
  }
}
);

.menuMobile {
      margin-top: 10%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 35%;
      height: 62%;
      @media only screen and (max-width: $sm) {
        display: none;
        width: 0%;
        background-color: black;
        position: absolute;
      }
    }
    .mobile{
      display : block!important;
      position : absolute;
      width: 100%;
      height : 140%;
      z-index: 900;
      // top : -10%;
      padding : 25% 10% 10% 20%;
      margin-left: 0%;
      margin-right: 0%;
      background-color: black;
      
    }

<div class="sous-menu-burger">

        <i class="fas fa-grip-lines"></i>

    </div> 

    <div class="cont-main">

        <div id="menuMobile" class="menuMobile"> 

                <a href="#"><div class="home-a">Home</div></a>

                <a href="#"><div class="about-a">About</div></a>

                <a href="#"><div class="skills-a">Skills</div></a>

                <a href="#"><div class="projects-a">Projects</div></a>

                <a href="#"><div class="contacts-a">Contacts</div></a>

        </div>

Answer

Try changing the else if statement from else if (window.innerWidth > '640' ) { to :else if (menuMobile.style.display != 'block'&& window.innerWidth > '640' ) {

Advertisement

Answer