Первый клик в гамбургере

Question

Я хочу задать вопрос, когда я нажимаю на значок munu на панели навигации, который у меня есть из font awesome, он не открывает мой munu в первый раз, но когда я снова нажимаю на панель навигации onoens, я буду более очищен эти изображения и ситуации

Первый щелчок Изображение первого щелчка

Второй щелчок Открытие означает щелчок два раза Изображение после второго щелчка время

Мой html код

function navigation() {
  let navLis = document.getElementById('navLis');
  let hamburger = document.getElementById('hamburger');

  if (navLis.style.marginTop === '-250px') {
    navLis.style.marginTop = '50px';
    setTimeout(function() {
      hamburger.className = 'fa fa-close';
    }, 200);
  } else {
    navLis.style.marginTop = '-250px';
    setTimeout(function() {
      hamburger.className = 'fa fa-bars';
    }, 200);
  }

}

.nav {
  position: absolute;
  z-index: 2222;
  width: 100%;
}

.current {
  color: black;
  background: #fff;
  padding: 4px;
}

li {
  list-style-type: none;
}

a {
  transition: .2s!important;
  text-decoration: none;
}

nav ul {
  margin-top: 20px;
  color: white;
  background: black;
  transition: all 1s linear!important;
}

nav {
  height: 60px;
  border-bottom: 2px solid black;
  background: black;
}

nav li {
  display: inline-block;
  transition: 1s!important;
  padding: 6px;
}

nav li a {
  color: white;
  display: inline-block;
  font-family: Sans-Serif;
  font-weight: bold;
  padding: 2px 0px;
}

nav li a:hover {
  color: black;
  background: #fff;
  padding: 4px;
}

#navLis {
  background: black!important;
  position: absolute;
  width: 100%;
  z-index: 11!important;
  padding: 10px 0;
}

nav i {
  display: none!important;
  font-size: 2em!important;
  position: absolute;
  top: 10px;
  right: 10px;
  transform: translate(-10px);
  color: white;
  transition: all 1s ease;
}

.logo {
  padding: 10px;
  display: block;
  z-index: 111;
  font-size: 25px;
}

.logo a {
  font-family: 'Josefin Sans', sans-serif;
  color: #ff6f00;
}

@media screen and (max-width:668px) {
  nav {
    height: 64px;
    transition: 1s!important;
  }
  nav li {
    text-align: center;
    display: block;
    transition: all 1s linear!important;
  }
  #navLis {
    transition: margin-top .3s ease-in .2s!important;
    display: block;
    margin-top: -250px;
    background: black;
    z-index: 11;
  }
  nav i {
    display: block!important;
  }
  .home_container {
    height: 80vh;
  }
}

<nav class="navbar" id="navbar">
  <div class="nav">

    <a onclick="navigation()">
      <i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
    </a>
    <div class="logo">

      <a href="#">The Big Blog </a>
    </div>
  </div>
  <div id="navLis">


    <ul>


      <li><a href="index.html">Home</a></li>
      <li><a href="#">Start Blogging</a></li>
      <li><a href="#">Popular Bloggers</a></li>
      <li><a href="#">About Us</a></li>
      <li><a class="current" href="contact.html">Contact Us</a></li>
    </ul>
  </div>
</nav>

Изменить: мои медиа-запросы

@media screen and (max-width:668px)
{ 
nav 
{ height: 64px; transition: 1s!important; } 

nav li 
{ text-align: center; display: block; transition: all 1s linear!important; }

 #navLis { transition: margin-top .3s ease-in .2s!important; display: block; margin-top: -250px; background: black; z-index: 11; }

nav i { 
display: block!important; 
}

 .home_container{ 
height: 80vh; 
} 

}