Menu icon Foundation
F6 Sticky on title-bar doesn't work…

well, I'm also using off-canvas on this page, so maybe the two don't play nice together. I'm not really in the mood to rip up my whole layout that I finally got right — just to see if I can get sticky nav working in the absence of off-canvas.

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas title bar for 'small' screen -->
    <div data-sticky-container>
      <div class="title-bar" data-top-anchor='100' data-responsive-toggle="widemenu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%">
        <div class="logo-wrapper">
          <div class="logo">
            <img src="/img/topbar-logo-badge.png">
          </div>
        </div>
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
      </div>
    </div>

...[ off canvas stuff ]...
...[ widemenu ]...
...[ main content stuff ]...

</div>

stickynavtitle-barmenuoff-canvasmobile

well, I'm also using off-canvas on this page, so maybe the two don't play nice together. I'm not really in the mood to rip up my whole layout that I finally got right — just to see if I can get sticky nav working in the absence of off-canvas.

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas title bar for 'small' screen -->
    <div data-sticky-container>
      <div class="title-bar" data-top-anchor='100' data-responsive-toggle="widemenu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%">
        <div class="logo-wrapper">
          <div class="logo">
            <img src="/img/topbar-logo-badge.png">
          </div>
        </div>
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
      </div>
    </div>

...[ off canvas stuff ]...
...[ widemenu ]...
...[ main content stuff ]...

</div>