title: How can I make a responsive navbar that is fixed to the top of the screen
body: <p>I'm attempting to create a responsive navbar that is fixed at the top of the page, and with the links full height (100%) so that their background colors can change. I've so far only succeeded in making the navbar fixed, and the links are only somewhat compatible across devices. I'm going for this effect, where the media queries force the menu into a nav contained in an image. <a href="http://getbootstrap.com/examples/navbar-fixed-top/" rel="nofollow">http://getbootstrap.com/examples/navbar-fixed-top/</a>. I dislike bootstrap, and I want to be able to do this on my own in the future. Any tips?</p>
  
  <p>Here is the code I have:</p>
  
  <p>Jade:</p>
  
  <blockquote>
    <p>head</p>
    
    <p>link(rel="stylesheet", href="/main.css")</p>
    
    <p>nav</p>
  
  <pre><code>ul
  
     li
  
         a(href="/") Home
  
         a(href="/about") About
  
         a(href="/contact") Contact
  </code></pre>
  </blockquote>
  
  <p>and </p>
  
  <p>LESS:</p>
  
  <blockquote>
    <p>nav {</p>
    
    <p>width:100%;</p>
    
    <p>height:3em;</p>
    
    <p>top:0px;</p>
    
    <p>left:0px;</p>
    
    <p>position:fixed;</p>
    
    <p>background-color:#000;</p>
    
    <p>ul li a {</p>
  
  <pre><code>   height:100%;
  
     text-align:center;
  
     margin-top: -3.5em;
  
     text-decoration:none;
  
     padding-right: 9%;
  
     padding-left: 9%;
  
     &amp;:hover {
  
         color:#7f8c8d;
  
     }
  </code></pre>
    
    <p>}  </p>
    
    <p>}</p>
  </blockquote>