title: How can I turn my navbar into Hamburger menu for mobile using responsive design?
body: <p>How could I turn this navbar I made using CSS into Hamburger menu for mobile ? It needs to be responsive. I first tried using bootstrap but I'd like it to use CSS</p>
  <p>Here's my codepen : <a href="https://codepen.io/Softee/pen/WNZpXGa" rel="nofollow noreferrer">https://codepen.io/Softee/pen/WNZpXGa</a></p>
  <p>Thanks in advance for your help!</p>
  <p>Here's the code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
      background: #583760;
  }
  
  header::after {
      content:  '';
      display: table;
      clear: both;
  }
  .logo {
      max-height: 90px;
      margin-left: 60px;
      float: left;
      padding: 10px;
  }
  
  nav {
      margin-right: 60px;
      float: right;
  }
  
  nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  nav li {
      display: inline-block;
      margin-left: 40px;
      padding-top: 50px;
  }
  
  nav a {
      color: white;
      font-weight: bold;
      text-decoration: none;
      text-transform: uppercase;
  }
  
  nav a:hover {
      color: black;
  }
  
  #nav:not(:target) {
      right: -100%;
      transition: right 1.5s;
  }
  
  #nav:target {
      right: 0;
      transition: right 1s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;header&gt;
          &lt;div class="container"&gt;
              &lt;img src="images/GameStar-Blanc.png" alt="logo" class="logo"&gt;
  
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;A LA UNE &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;L'ACTUALITE&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;GUIDES ET ASTUCES&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;PROCHAINEMENT&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>