title: Redirecting user to menu section, after button click, by popping up nav bar from the bottom of the screen
body: <p>Thanks to Rene for the first part that works now. :)</p>
  <p>I have a bug that I don't know how to fix:</p>
  <ul>
  <li>its job is to pop up nav bar from the bottom of the screen for half of second so that user know where it is and than it gets back down after half a second</li>
  <li>then user can hover over it and it pops up automatically and stays up as long as mouse is on it, and on mouse out it gets to its first position.</li>
  </ul>
  <p>Problem:
  ***after button action, hover animation doesn't work anymore, is that because JS overwrites CSS nav:hover, and if so do you maybe know how to fix it. Thank you for help really helps a lot!</p>
  <p>and here is JS code:</p>
  <pre><code>//nav popup
  
  const navHover = function navHover() {
    const nav = document.getElementById(&quot;nav&quot;);
  
    nav.style.transition = &quot;all 1s&quot;;
  };
  
  ///////////////////////////////////////////////////////////////////////////
  //Menu button
  
  const openNav = function openNav() {
    const menuButton = document.getElementById(&quot;menuButton&quot;);
    const nav = document.getElementById(&quot;nav&quot;);
  
      nav.style.height = &quot;50px&quot;;
      console.log(&quot;to 50px&quot;);
  
      setTimeout(function navBackDown() {
        nav.style.height = &quot;10px&quot;;
        console.log(&quot;to 10px&quot;);
      }, 600);
  };
  </code></pre>
  <p>Thank you for help.</p>