Menu icon Foundation
How to create a fixed topbar with offcanvas

Hi,
I would like to create a fixed topbar with offcavans, this is my code :

    <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></div>
        <div class="off-canvas-content" data-off-canvas-content>
          <div class="title-bar">
            <div class="title-bar-left">
              <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
              <span class="title-bar-title">Foundation</span>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
            

         

I have fixed the title-bar like this :

.title-bar{
    position:fixed;
    width:100%;
}
            

         

But i have many problems :

When i click on the button .menu-icon the page scroll to top.

When the offcanvas is open, the title-bar is not fixed.

Thanks for your help !

offcanvastopbar

Hi,
I would like to create a fixed topbar with offcavans, this is my code :

    <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></div>
        <div class="off-canvas-content" data-off-canvas-content>
          <div class="title-bar">
            <div class="title-bar-left">
              <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
              <span class="title-bar-title">Foundation</span>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
            

         

I have fixed the title-bar like this :

.title-bar{
    position:fixed;
    width:100%;
}
            

         

But i have many problems :

When i click on the button .menu-icon the page scroll to top.

When the offcanvas is open, the title-bar is not fixed.

Thanks for your help !

Rafi Benkual almost 4 years ago

I think, if I understand what you're saying, the issue is that the off-canvas jumps to the top when the menu is opened.

If that's right, it is a challenging problem to solve. The off-canvas menu needs to push the body over when opened. In order to do so, it needs to be positioned relatively for the body. So if it didn't jump back to the top, the user would have to scroll back up to see the menu.

I added your code here so it's easier for everyone to see:
http://codepen.io/rafibomb/pen/XXZMxG?editors=1000

You might be better off using a slide out panel like this: http://codepen.io/rafibomb/pen/eJVvbx

Adam almost 4 years ago

I too would also like a fixed top bar to work nicely with off canvas.

I found this 3 page forum post with various work around's each which seem to have their own issues.

http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar?page=3/

This forum post was originally posted 2 years ago so there must be a nice solution to this problem?

Does zurb respond on these forums? is it possible to get an official solution to this?

Cheers,
A