Menu icon Foundation
off-canvas with fixed top bar

Hello,

I'm trying to display an off-canvas menu inside a fixed top bar.

The problem is, when i click the trigger of the off-canvas inside the fixed top bar, the top bar goes on top of the document, and when i close the off-canvas, the top bar returns to it's fixed position again

Here is an example: http://jsfiddle.net/nebuchar/Sbt75/

offcanvastopbarfixed

Hello,

I'm trying to display an off-canvas menu inside a fixed top bar.

The problem is, when i click the trigger of the off-canvas inside the fixed top bar, the top bar goes on top of the document, and when i close the off-canvas, the top bar returns to it's fixed position again

Here is an example: http://jsfiddle.net/nebuchar/Sbt75/

Tobias Malikowski about 5 years ago

I've tried different solutions and did some testing, but haven't figured out a fully working solution.
It should possible to have a sticky top bar with an off-canvas function for mobile devices...

Jay Roberts about 5 years ago

Hi,

this worked perfectly for me,

thanks

J

Robbert Stapel about 5 years ago

Hello,

Had the same issue, the off-canvas just scrolled along with my page.
In this topic i saw some nice solutions for my problem, however none of them worked for me. (i know, i did something wrong)

Because i didnt get it to work i tried a very simple "foundation based" solution.

This is how i got my fixed off-canvas to work.

Just take the normal off-canvas and wrap your aside in a div with a class of fixed.

      <div class="fixed">

          <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">

            </ul>
          </aside>

      </div>

Normally the menu items should go inside the ul above...
But instead i created a separate div to place my menu in.

i gave it the class left to position it where my menu has to come
i gave it the class fixed to make sure you can scroll and the menu will stay
and last i gave it the class zindex so i can set z-index to 0 so it will be hidden behind my page.

<div class="fixed left zindex">
  <p>Menu item</p>
  <p>Menu item</p>
  <p>Menu item</p>
</div>

Than in css i gave mu zindexclass the following property

.zindex{
  z-index: 0;
}

Problem solved

Im not sure if this is the right solution but i think its very simple and effective.
And because its pure foundation, it should work on "any" device.

wlc almost 5 years ago

The following worked for me.

Add the "fixed" class to the "off-canvas-wrap" like so:

<div class="off-canvas-wrap fixed" data-offcanvas>

and add the following to your Style Sheet:

body,html{
    height:100%;
    width:100%;
}

.off-canvas-wrap,.inner-wrap{
    height:100%;   
}

.off-canvas-wrap .main-section
{
  height: 100%; overflow:scroll;
}

/* remove scroll bars in Safari */
.off-canvas-wrap .main-section:-webkit-scrollbar { 
    display: none; 
}

So far so good.

Arie Katz almost 5 years ago

I see people keep posting variations of a workarounds a don't get why Zurb does not releas hot-fix for it, a frame work dedicated to mobile-first does not support fixed header?

So for anyone, I tried Nobu Kakegawa (P2, first comment) method which is dead-simple and worked.

http://jsfiddle.net/Sbt75/49/

P.s: From the behaviour of Google+ on mobile it seems like they had they same problem (issue with off canvas menus and fixed header) and implemented the same workaround (scrollable content) (See how the top URL bar doesn't go off ;) ?

Norbert Stüken almost 5 years ago

@Arie Katz: This is probably the best solution so far as long as you are not intending to use anchor scrolling. Check out my comment on the prior page for more info.

Adam Fingret almost 5 years ago

All these hacks are good and well, but isn't it time that Zurb baked a solution directly into Foundation with a simple "fixed" class on the .tab-bar?

Hard to complain about a free framework, but if you want it to be the best framework, it needs to work properly.

This is an badly ageing problem. C'mon Zurb. Get'r done!

Juan Jimenez almost 5 years ago

I have adapted the solution by Andres Bott and it seems to work to the point of nearly solving the problem.

He posted his solution at http://jsfiddle.net/aBott/ucCQ3/1/

However, for me, just adding this CSS seemed to do the trick:

.off-canvas-wrap.move-right, 
.off-canvas-wrap.move-right .inner-wrap
 {
    height: 100%;
    width: 100%;

}

.off-canvas-wrap.move-left, 
.off-canvas-wrap.move-left .inner-wrap
 {
    height: 100%;
    width: 100%;
}

This has generated new issues:

  1. Main content area scrolls to the top when clicking on the off canvas toggle (even with data options for scrolling set to false) 2.Chrome (and possibly other browsers) do not interpret the off canvas as scrollable but as overflowing so it adds scrolling bars instead. [I've not tested with mobile yet, so don't know if this is an issue for Chrome desktop only)

Alex Scott almost 5 years ago

https://github.com/tipsforthings/foundation-sidebar-nav

Check out this navigation template, it may well suit your need, with a fixed top bar and a fantastic sidebar.

Kevin Christopher Henry over 4 years ago

Having spent some time looking at the various solutions, I thought I'd chime in to summarize a bit and hopefully help others get up to speed.

The goal is to have a header and an offcanvas menu fixed in the same place regardless of the scroll position of the window. The obvious way to do it—using "position: fixed"—doesn't work, because of a strange part of the CSS standard that changes the meaning of "fixed" when it's used inside of an element with a transform (which in this case is ".inner-wrap"). This behavior is acknowledged to be problematic, and might even change, but it's clear that for the foreseeable future you should not be putting fixed elements inside of elements that could have transforms applied. (See this article for a good summary of the issue: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/.)

There are a few different approaches to the problem that are discussed here:

1) (Karl Ward) Don't use transforms to perform the animation. The downside here is that the animation won't be hardware-accelerated, which could noticeably affect smoothness (on mobile platforms in particular).

2) (Nobu Kakegawa and others) Get rid of "position: fixed" entirely. Instead, put the content in its own scroll container that takes up the whole viewport. Since the body itself never actually scrolls, the menu and header just stay where they are.

The downside is that this is a pretty big structural change to the page, and could affect other plugins and features. Broken features reported in this thread include Joyride, Magellan, and anchor scrolling. David Govea reports anecdotally that "this can make things wonky on mobile".

3) (David Govea and others) Take the fixed elements outside of inner-wrap. That way, they no longer have it as an animating parent. However, since the offcanvas plugin will no longer animate them, you have to do it yourself by adding some new CSS rules.

The other issue is that you have to correctly size the fixed menu so that it takes up the height of the viewport. David Govea suggests using vh units, or a javascript resize listener for browsers that don't support that. (For me, "top: 0; bottom: 0;" is working well, but I haven't tested it extensively.)

Finally, I'll note that solving this problem is easier if you're happy using the "overlap" rather than the "move" animation (see http://foundation.zurb.com/docs/components/offcanvas.html#optional-javascript-configuration). With "move", ".inner-wrap" never has the transform applied. Therefore, you don't have to move the fixed elements out of it, and you don't have to explicitly provide the transformation rules. All you have to do is size the menu.

Hope that helps.

Andre over 4 years ago

Hi guys,

Maybe I'm missing something here!? But this works perfect for me using the overlap animation, the sticky class on the top bar and setting the .left-off-canvas-menu positioning to fixed.

Cheers

Pablo Carballeda Navarro about 4 years ago

wlc solution works for me, pretty simple and effective

Andres Bott almost 4 years ago

Since i wanted a more complex off-canvas menu, and based on some solutions i found here i mage the following desing, hope it helps someone.

http://jsfiddle.net/aBott/u33k0vvp/

Remi almost 4 years ago

Any updates on this from Foundation?

As far as I can see there are 2 possible workarounds for this problem.

  1. @wlc posted a possible solution a few posts back about a year ago
  2. Rafi Benkual posted a codepen example http://codepen.io/rafibomb/pen/hApKk

@Andres Bott It seems that your solution is built upon the suggestion of @wlc, is that correct?

Andres Bott almost 4 years ago

@Remi
Not sure any more...
i took some ideas from this thread, and developed my own solution.
yo could understand my solution as:
take everithing that usually goes in html body and put it in a div (vertical scroll) so you can make a nice offcanvas menu.

then make two menus, one is on the top of the content, the other one is fixed. change the menus when you scroll. In this way you can even have a starter menu, for example with a big logo and a smaller scroll menu.

Remi almost 4 years ago

@Andres Bott Thanks. Sounds like a neat solution for this.

For my project I'm a bit hesitant with the vertical scroll option on a main div. It's quite a large website with a lot of customizations by stakeholders. However going to try it out and run regression tests to make sure nothing breaks. :)

Cheers

Andres Bott almost 4 years ago

yeah... it's not a perfect solution.

i' m thinging of try another aproach when i got more time, but for now for my project it goes this way.

the main problem i found when using the body scroll is, when you scroll donw, and open the off canvas menu, the scroll instantly apear on the top of the page, or you see a empty off canvas because the menu is on the top and you are on a lower scroll....

still... there must be a solution...

Andres Bott almost 4 years ago

yeah... it's not a perfect solution.

i' m thinging of try another aproach when i got more time, but for now for my project it goes this way.

the main problem i found when using the body scroll is, when you scroll donw, and open the off canvas menu, the scroll instantly apear on the top of the page, or you see a empty off canvas because the menu is on the top and you are on a lower scroll....

still... there must be a solution...

Adam over 3 years ago

2 years since this was originally posted. Is there a good working solution yet?

I tried Rafi Benkual solution where it causes the tab bar to cover the browsers scroll bar at the top and you have to force some space before your main content otherwise it's chopped off.

I also tried wlc's solution which seems to have the opposite problem it chops off the bottom part of the browsers scroll bar.

After 2 years I'd really hope there is a nice solution to this :(

Andres Bott over 3 years ago

hahahahahahahaha!
sadly two years and no easy and clean solution.
it goes to the point i've started to develop my own off canvas solution
still early stage, but i'll post it here when fnished

and foundation 6 broke my solution for 5