title: How to make a responsive navbar without bootstrap?
body: <p>How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width <strong>without bootstrap, but from scratch</strong>?
  <a href="https://i.stack.imgur.com/R33qL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R33qL.png" alt="enter image description here" /></a></p>
  <p><strong>Here is the fiddle</strong><a href="https://jsfiddle.net/6951Lscu/" rel="nofollow noreferrer">https://jsfiddle.net/6951Lscu/</a></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>    
      #myNavbar{
      position: fixed;
      width: 100%;
      background: white;
      border-style: solid;
      border-width: 0 0 1px 0;
      border-color: #E8E8E8;
      text-decoration: none;
  }
  
  ul{
      list-style: none;
  }
      
  .medium{
      font-family: "Roboto", sans-serif;
      font-weight: 500;
  }
  
  .right-nav{
      padding: 8px 15px;
      float: right;
  }
  
  
  div.container{
      font-family: Raleway;
      margin: 0 auto;
      padding: 6px 3em;
      text-align: center;
  }
  
  div.container a
  {
      color: #000;
      text-decoration: none;
      margin: 0px 20px;
      padding: 5px 5px;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myNavbar"&gt;
      &lt;div class="container"&gt;
  &lt;ul&gt;
    &lt;li style="float:left"&gt;&lt;a href="#home"&gt;&lt;img class="navlogo" src="svg/navlogo.svg" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class="right-nav"&gt;&lt;a href="#Kontakt"&gt;&lt;span class="medium"&gt;KONTAKT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
     &lt;li class="right-nav"&gt;&lt;a href="#Pris"&gt;&lt;span class="medium"&gt;PRIS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li class="right-nav"&gt;&lt;a href="#Garantier"&gt;&lt;span class="medium"&gt;GARANTIER&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li class="right-nav"&gt;&lt;a href="#Ommeg"&gt;&lt;span class="medium"&gt;OM MEG&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt;
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>