title: Fixed Off-Canvas Menu with Zurb Foundation
body: <p>I am building a web page with Zurb Foundation. I need my web page to run on phones and laptops. What's unique about my app is I want to do something more refined than responsive design. For that reason, I'm making heavy use of the <code>show-for-small-only</code> and <code>show-for-medium-up</code> classes.</p>
  
  <p>In my phone view, I'm making use of <a href="http://foundation.zurb.com/docs/components/offcanvas.html" rel="nofollow">Offcanvas navigation</a>. As the HTML is setup, it works great if you include the content of your page in the off-canvas-wrap div. However, in my scenario, I cannot do that. Instead, I want to have the content of my page outside of the off-canvas-wrap div. This creates two problems:</p>
  
  <ol>
  <li>The menu doesn't grow to the size of the window.</li>
  <li>If I make the right-off-canvas-menu the height of the window, it pushes my content down.</li>
  </ol>
  
  <p>I've created a <a href="http://jsfiddle.net/Evm4V/1/" rel="nofollow">JSFiddle here</a> that demonstrates the problem. Is there a way I can make the offcanvas menu just slide over the top of everything? I do not need to push everything to the left. Pushing is fine. My main issue is I need to have the content where it is, but still have the menu appear full-size when needed.</p>
  
  <p>Thank you</p>