Menu icon Foundation
off canvas menu - Fixed Position Header - Scrolling

First, than you in advance for any help you may provide. Also, I'm a noob so please guide me to better solutions(s) where needed.
-----
I'm trying to use an off canvas menu (and if I can with a fixed or position absolute with top being set to zero position) - I'm having problems with scrolling content or the off canvas menu.

***For example, when trying Foundation's homepage (http://foundation.zurb.com/) I am able to scroll the main page content but the off canvas menu scroll does not work. - using Android v2.3.6 on an actual device not through emulation***

I'm trying to support scrolling with the older mobile phone devices. I'm looking into:
iScroll - http://cubiq.org/iscroll-5
Overthrow - http://filamentgroup.com/lab/overthrow.html
or possibly with - http://filamentgroup.com/lab/a-different-approach-to-qualifying-css-position-fixed.html

Any suggestions from the community for a better solution (or confirmation that one of these is a better approach than the other) would be greatly appreciated.

Thank you in advance for any help you may provide.

Off canvas navigationfixed positionscrollingAndroid v 2.3.6older mobile devices

First, than you in advance for any help you may provide. Also, I'm a noob so please guide me to better solutions(s) where needed.
-----
I'm trying to use an off canvas menu (and if I can with a fixed or position absolute with top being set to zero position) - I'm having problems with scrolling content or the off canvas menu.

***For example, when trying Foundation's homepage (http://foundation.zurb.com/) I am able to scroll the main page content but the off canvas menu scroll does not work. - using Android v2.3.6 on an actual device not through emulation***

I'm trying to support scrolling with the older mobile phone devices. I'm looking into:
iScroll - http://cubiq.org/iscroll-5
Overthrow - http://filamentgroup.com/lab/overthrow.html
or possibly with - http://filamentgroup.com/lab/a-different-approach-to-qualifying-css-position-fixed.html

Any suggestions from the community for a better solution (or confirmation that one of these is a better approach than the other) would be greatly appreciated.

Thank you in advance for any help you may provide.

Matt H about 5 years ago

give this a try and lemme know how it works out for ya

http://jsfiddle.net/KBne4/12/

Just Forms about 5 years ago

Matt H

Thank you, I will give it a try.

I gave up on the fixed position header for now. Too many problems/issues with older Android phones.

I came across this article (hope this helps a few others out):

http://bradfrostweb.com/blog/mobile/fixed-position/

I tried a lot of these solutions out but one way or another issues would arise. As much as I would like to have a fixed position header I need to keep older device usability more.

Thank you again. I will test and post my findings/results.

Esen Espinosa over 4 years ago

Hi,

I know its a bit late (like 8 months late), but code, as words, are eternal, so....

If you are using the easiest example of the off-canvas-menu that foundation has, you can do a simple trick to have a fixed off-canvas-menu.

You need to change your html to have an extra inside the "inner-wrap" that comes with the off-canvas-menu. And then, simply add this css to it:

.inner-inner-wrap {
  overflow: scroll;
  max-height: 102vh;
  min-width: 102%;
}

That will do 3 things:

  1. First we add overflow: scroll to this wrapper, that is wrapping ALL content in your page but the off-canvas-menu (wich, if you check the foundations doc, its outside the "inner-wrap"). This will make you capable of scrolling your content while the off-canvas-menu keeps its kind of fixed position.

  2. Then you need to add a height, because if you forget this, the "inner-inner-wrap" is going to be as long as your content, and no scroll possible then. We need more than 100vh height because a strange-2-10px-height-space is appearing at the bottom of your content.

  3. Then you need to add a width in order to cover all the width of the page and a little more. Why? Because the inner-wrap and the off-canvas wrappers are doing strange things to your content, so we need more than 100% width to cover everything.

Good luck!
Let me know if it worked.

Esen

Rafi Benkual over 4 years ago

Thanks Esen - essentially it's what I did here: http://codepen.io/rafibomb/pen/hApKk

Olivia about 4 years ago

This works great on Android phones. However, on iPhone scrolling becomes very jerky instead of smooth.

Rafi Benkual about 4 years ago

@Yogesh Singh What you shares is exactly like Top-Bar which Foundation has. I think this is the solution people are seeking - http://codepen.io/rafibomb/pen/hApKk because it's an off-canvas

Dominik Schläpfer over 3 years ago

Just for the records, the "jerky" scrolling on IOS devices can be fixed with

.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap {
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch; 
}

HTH

Just Forms about 3 years ago

I'm not on the forums much. I'm not a developer... more of a dabbler, helping a few friends with websites etc. That said, I wanted to say thank you to everyone who responded. I appreciate the time and expertise.