title: How to move nav items off the screen when viewing on mobile
body: <p>I am learning how to build the hamburger menu for mobile devices. </p>
  
  <p>I have built a navigation that has three children. Logo, nav-items and hamburger menu. I used flexbox to position them side-by-side and display: none on hamburger menu on desktop to hide it initially. </p>
  
  <p>I tried playing around with position relative/absolute, but it's not quite working. Also, changing flex-direction: row to column won't help. </p>
  
  <p>Here's the markup for the navbar</p>
  
  <pre><code>&lt;nav class="nav"&gt;
    &lt;div class="brand"&gt;&lt;h4&gt;The Brand&lt;/h4&gt;&lt;/div&gt;
  
    &lt;div class="navigation"&gt;
      &lt;ul class="navigation__list"&gt;
        &lt;li class="navigation__item"&gt;
          &lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation__item"&gt;
          &lt;a href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation__item"&gt;
          &lt;a href="#"&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation__item"&gt;
          &lt;a href="#"&gt;Gallery&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation__item"&gt;
          &lt;a href="#"&gt;Blog&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="navigation__item"&gt;
          &lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;button class="hamburger"&gt;
      &lt;span class="hamburger__box"&gt;
        &lt;span class="hamburger__inner"&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/button&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>What I want to achive is: On mobile devies, the hamburger menu should appear. The nav items should dissapear off the screen and should be placed vertically. I want them to slide in from the right when hamburger is clicked.</p>
  
  <p>codepen: <a href="https://codepen.io/kowalik9412/pen/WNeMQrO" rel="nofollow noreferrer">https://codepen.io/kowalik9412/pen/WNeMQrO</a></p>