Menu icon Foundation
Sticky title-bar with off canvas

Hi, I need to create a layout with a title-bar stuck to top edge and an off canvas menu. My code works, but it has a flaw - when I open the left off-canvas and scroll down, the title bar jumps to the right.

I figured out this won't happen if I remove data-options="marginTop: 0", but that creates a gap between the title-bar and window edge. Is there any way I can fix this, or an alternative to using marginTop?

I am new to Foundation, thanks for any help.

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

<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
  <ul class="vertical menu" data-dropdown-menu>
    <li class="menu-text">Site Title</li>
    <li><a href="left_item_1">Link 1</a></li>
    <li><a href="left_item_1">Link 2</a></li>
  </ul>
</div>

<div data-sticky-container>
  <div class="small-12 sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0">
    <div class="fixed">
    <div class="title-bar">
      <div class="title-bar-left">
        <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
        <span class="title-bar-title">Title bar</span>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="off-canvas-content" data-off-canvas-content>
  <div class="row">
    <div class="columns">
          <img src="http://placehold.it/3000" alt="" />
    </div>
  </div>
</div>

</div>
</div>   

off-canvasstickytitle-bartop-bar

Hi, I need to create a layout with a title-bar stuck to top edge and an off canvas menu. My code works, but it has a flaw - when I open the left off-canvas and scroll down, the title bar jumps to the right.

I figured out this won't happen if I remove data-options="marginTop: 0", but that creates a gap between the title-bar and window edge. Is there any way I can fix this, or an alternative to using marginTop?

I am new to Foundation, thanks for any help.

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

<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
  <ul class="vertical menu" data-dropdown-menu>
    <li class="menu-text">Site Title</li>
    <li><a href="left_item_1">Link 1</a></li>
    <li><a href="left_item_1">Link 2</a></li>
  </ul>
</div>

<div data-sticky-container>
  <div class="small-12 sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0">
    <div class="fixed">
    <div class="title-bar">
      <div class="title-bar-left">
        <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
        <span class="title-bar-title">Title bar</span>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="off-canvas-content" data-off-canvas-content>
  <div class="row">
    <div class="columns">
          <img src="http://placehold.it/3000" alt="" />
    </div>
  </div>
</div>

</div>
</div>   
Richard Rudy over 3 years ago

I'm nor sure, but I suspect the problem is your nested <div class='fixed'>, does it have a width 100%?

This is working for me.
```HTML

        <div data-sticky-container class="sticky-container">
            <div data-options="marginTop:0;" data-sticky-on="small" data-events="resize">
                <header class="site-header">
                    <div class="title-bar top-bar">
                        Top Bar Code
                    </div>
    </header>
            </div>
        </div>
        <nav class="off-canvas position-right" id="offCanvasRight" data-position="right" aria-hidden="true">
Off Canvas Stuff
        </nav>

        <main id="MainContent" class="off-canvas-content" data-off-canvas-content>
          Content
        </main>

    </div>

</div>

Brikowski over 3 years ago

Solved it, thanks! Actually it wasn't width, it was "left" fluctuating between 0 and 250px (WHAT??).

If anyone has the same problem, just give the sticky div an id and a

  left: 0px !important;

It must be in .css file, style="" would get overwritten (also not sure why).

Ryan McCready over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63