title: Foundation 6, Sticky menu and offcanvas Position Fixing
body: <p>Currently using foundation 6 Off canvas with basic html here</p>
  
  <pre><code>&lt;div class="off-canvas-wrapper"&gt;
      &lt;div class="off-canvas-wrapper-inner" data-off-canvas-wrapper&gt;
          &lt;div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right"&gt;
              Menu off canv
          &lt;/div&gt;
  
          &lt;div class="off-canvas-content" data-off-canvas-content&gt;
              &lt;div class="top-bar-container" data-sticky-container&gt;
                  &lt;div class="sticky" data-options="marginTop:0;" data-sticky data-sticky-on="small" style="width:100%;"&gt;
                      &lt;div class="top-bar"&gt;
                          &lt;div class="row column"&gt;
                          columns content
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Problem here is when user scrolls and then click on offcanvas menu they get brought to the top ( same thing as foundation's doc ) and when they scroll down again the sticky menu acts really funny.</p>
  
  <p>also the offcanvas menu doesn't stick to the side as the user scrolls, which is what the doc on foundation does as well.</p>
  
  <p>I noticed when toggled there is a is-open class on the big wrapper that does a css translate x
  this is what is breaking the sticky from position absolute.</p>
  
  <p>when I switched that class to margin-left: -250px; everything works again.</p>
  
  <p>I was looking on the web but couldn't find anything that is related and was wondering if it is just my html structure being incorect or is that really a bug.</p>