title: Hamburger menu problem - CSS and vanilla JS
body: <pre><code>&lt;header class=&quot;header&quot;&gt;
      &lt;div class=&quot;flexcontainer&quot;&gt;
          &lt;figure class=&quot;logo&quot;&gt;
              &lt;img src=&quot;img/logo-biele.png&quot; alt=&quot;logo&quot;&gt;
          &lt;/figure&gt;
              
          &lt;nav class=&quot;navigation&quot;&gt;
              &lt;ul class=&quot;navigation__list&quot;&gt;
                  &lt;li class=&quot;navigation__list-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;navigation__list-link active&quot;&gt;Domov&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=&quot;navigation__list-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;navigation__list-link&quot;&gt;one&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=&quot;navigation__list-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;navigation__list-link&quot;&gt;two&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=&quot;navigation__list-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;navigation__list-link&quot;&gt;three&lt;/a&gt;&lt;/li&gt;
                  &lt;li class=&quot;navigation__list-item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;navigation__list-link&quot;&gt;four&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class=&quot;burger&quot;&gt;
                  &lt;div class=&quot;line1&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line3&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  <p>Above my HTML.</p>
  <pre><code>    .navigation {
      flex:0 1 100rem;
      
      margin: auto;
  
      &amp;__list {
          display: flex;
  
          justify-content: space-between;
          
  
          @media only screen and (max-width: 900px) {
              text-align: right;
              flex-direction: column;
              position: absolute;
              //width: 100%;
              right: 0;
              top: 8vh;
              background-color: var(--nav-bg);
              opacity: 0;
              //transform: translateY(-120%);
              transition: all .2s;
          }
  
          @media only screen and (max-width: 600px) {
              flex-direction: column;
              position: absolute;
              width: 100%;
              right: 0;
              //top: 8vh;
              background-color: var(--nav-bg);
              //opacity: 0;
              //transform: translateY(-120%);
              transition: all .2s;
          }
  
          &amp;-item {
  
              @media only screen and (max-width: 900px) {
                  padding: 2rem 1rem;
                  align-self: flex-end;
              }
          }
  
          &amp;-link:visited,
          &amp;-link:link {
              font-size: 1.6rem;
              font-family: &quot;Quicksand&quot;, sans-serif;
              letter-spacing: .2rem;
              text-transform: uppercase;
              color: var(--almost-white);
              transition: all .1s;
              padding-bottom: 5px;
  
              position: relative;
  
              @media only screen and (max-width: 900px) {
                  padding: 1.5rem;
              }
              
          }
  
          &amp;-link::after {
              content: &quot;&quot;;
              position: absolute;
              left: 0;
              bottom: 0;
              height: 1px;
              width: 100%;
              background-color: white;
              transform: scaleX(0);
              transition: all .3s;
          }
  
          &amp;-link:hover::after {
              transform: scaleX(1.2);
  
              @media only screen and (max-width: 900px) {
                  transform: scaleX(1);
              }
          }
      }
  }
  
  .active::after {
      content: &quot;&quot;;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;  
      background-color:white;
      z-index: 2;
      transform: scaleX(1.2);    
      
      @media only screen and (max-width: 900px) {
          transform: scaleX(1);
      }
    }
  
    .burger {
        position: absolute;
        top: 25px;
        right: 20px;
        cursor: pointer;
        display: none;
  
        @media only screen and (max-width: 900px) {
          display: block;
      }
    }
  
    .line1,
    .line2,
    .line3 {
        background-color: white;
        height: 2px;
        width: 30px;
        display: block;
    }
  
    .line2 {
        margin: 7px 0;
    }
  
    .toggle-menu {
      @media only screen and (max-width: 900px) {
      display: block;
      position: absolute;
      //right: 0;
      top: 8vh;
      text-align: right;
      opacity: 1;
      //width: 100%;
      }
    }
   
  </code></pre>
  <p>Above my css.</p>
  <pre><code>const navSlide = () =&gt; {
      const burger = document.querySelector('.burger');
      const nav = document.querySelector('.navigation__list');
  
      burger.addEventListener('click', ()=&gt;{
          nav.classList.toggle('toggle-menu');
          burger.classList.toggle('toggle-burger');
      })
  }
  
  navSlide();
  </code></pre>
  <p>Above my script.</p>
  <p>Whatever I try, when I click on the hamburger menu the logo as it's png changes the color to darker for a split second. I would guess there is something moving above it. But even if I try to not move the menu in any direction, just simply change the opacity from zero to 1, the result is the same. Not sure where I'm making the mistake or if this what I'm trying to achieve can be implemented better.</p>
  <p>Would like to have it slide from top to bottom and then from bottom to top, but all the tutorial I have found are just for sliding it in left or right direction.</p>