3

Hi I am trying to get zurb foundation 6 to have the off-canvas menu with sticky menu inside. Remaked off-canvas layout to have same height of sidebars and content blocks in desktop view.

Problem:

  • Sticky menu not working in right off-canvas sidebar

<div class="off-canvas position-right reveal-for-medium sticky-container" id="offCanvasRight" data-off-canvas="" data-position="right" data-sticky-container="" aria-hidden="true" data-offcanvas="f9d5j6-offcanvas" style="height: 24px;">
  <div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas data-position="right" data-sticky-container>
    <div class="callout sticky" data-sticky data-margin-top="0">
      <h5>This is a callout.</h5>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      <a href="#">It's dangerous to go alone, take this.</a>
    </div>
  </div>
</div>

I've created a JSFiddle here that demonstrates the problem.

Kasara
  • 265
  • 1
  • 3
  • 8
  • If someone does figure this out. It world be great to get an example how to make both top bar and off canvas navigation sticky. For clarity I'm using http://foundation.zurb.com/sites/docs/off-canvas.html#title-bar with menu inside ` – Lord_JABA Jun 15 '16 at 17:37
  • You example is a bit complex. Try creating a simple page with a working off canvas menu (leave all the other components out). Once you have the working off canvas menu. Add your example menu to the off-canvas. Make sure it works. Edit your question showing your simple working off-canvas menu and ask how to make it sticky. – Chris O Nov 17 '16 at 14:39

0 Answers0