title: Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element
body: <p>Let's get the fiddles out of the way first (built on the <a href="http://foundation.zurb.com/" rel="nofollow"><strong>Foundation</strong></a> responsive framework):</p>
  
  <p><a href="http://jsfiddle.net/mKAtM/" rel="nofollow"><strong>Fiddle 1: one nav element, but becomes unfixed when side nav slides out</strong></a></p>
  
  <p><a href="http://jsfiddle.net/Fewb3/1/" rel="nofollow"><strong>Fiddle 2: working but with multiple nav elments</strong></a></p>
  
  <p>Okay so, I have been racking my brain trying to develop and elegant solution for the following:</p>
  
  <p>1) Make a responsive, fixed navigation that switches from stretching across the top to sliding out of the side on smaller screen sizes (ala the Facebook app)</p>
  
  <p>2) I'd like to use the same DOM element for the navigation, rather than have two separate but identical  elements</p>
  
  <p>I was able to accomplish this using CSS translations, except for the fact that <a href="http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/" rel="nofollow"><strong>translations remove the fixed property</strong></a> of the nav (see fiddle 1).</p>
  
  <p>The Fiddle 1 solution uses CSS translations like so:</p>
  
  <pre><code>-webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  -o-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
  </code></pre>
  
  <p>While Fiddle 2 acts on the left and right margins of the content:</p>
  
  <pre><code>margin-right: -250px;
  margin-left: 250px;
  </code></pre>
  
  <p>I'd like to somehow find a way to use just one DOM element for both elegance and so nav-related plugins will still work (like scrollspy)</p>