title: scaling the navigation bar - responsive design
body: <p>I'm trying to make my website fully responsive, and I'm stumbling upon the navigation bar; I cannot seem to make it responsive. My coding is as following:</p>
  
  <pre><code>&lt;div class = "navbar" &gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Collectie&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Zomercollectie&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Wintercollectie&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Kerstcollectie&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Over ons&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS as following:</p>
  
  <pre><code>.navbar
  {   
  height: 50px;
  width: 920px;
  max-width:100%;
  background-color:#2d2d2d;
  margin-left:auto;
  margin-right:auto;
  }
  
  /* NAVBAR CSS */
  
  nav ul ul 
  {
  display: none;
  
  }
  
  nav ul li:hover &gt; ul 
  {
  display: block;
  }
  nav ul {
  background:#2d2d2d; 
  color:ffffff;
  font-size:30px;
  padding: 0 20px;
  list-style: none;
  position: relative;
  display: inline-table;
  margin-top: 0;
  
  }
  
  nav ul:after 
  {
  content: "";
  clear: both; 
  display: block;
  }
  
  nav ul li 
  {
  float: left;
  }
  
  nav ul li:hover 
  {
  background: #4b545f;
  }
  
  nav ul li:hover a 
  {
  color: #fff;
  }
  
  nav ul li a {
  display: block; 
  padding: 7px 93px;
  color: #757575;     
  text-decoration: none;
  }
  
  nav ul ul 
  {
  background: #5f6975; 
  padding: 0;
  position: absolute; 
  top: 100%;
  }
  
  nav ul ul li 
  {
  float: none; 
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
  }
  nav ul ul li a 
  {
  padding: 15px 40px;
  color: #fff;
  }   
  
  nav ul ul li a:hover 
  {
  background: #4b545f;
  }
  
  /* END of NAVBAR CSS */
  </code></pre>
  
  <p>I would like to make it scale the whole thing, including fonts when they are too big, and without the buttons stacking vertically.</p>
  
  <p>Any idea?</p>