OffCanvas menu scrolls with canvas on mobile devices - refer to issue #151

[nickdevigns]

@jasny : So I've been going through the process of using the offcanvas push menu and first let me mention what an awesome piece of work you've developed and really appreciate all the hard work and thought put into this as well as the many updates to make this a great module to use with Bootstrap.

As I noticed this issue(#151) was previously closed and have read the previous documentation regarding this, I was wondering of there was any way to lock the position of the offcanvas menu (as well as the body) so that it does not scroll up upon activating the offcanvas toggle after scrolling the body of the page further down on mobile devices (at least with iOS this is happening). This doesn't happen when using the desktop browsers - when resizing the screen/viewport, but not the case with mobile (iOS) and possibly other webkit browsers. As I've been trying to apply fixes on my own for the project I'm working on, I'm running into this roadblock and can't seem to find any solutions on my own or online. Here's a link of a clean example of what is occurring when I add more body content to your navmenu push example: http://www.thecreativearmada.com/production/pubweb/examples/navmenu-push/, here's the fiddle as well: http://jsfiddle.net/nickdevigns/yzex2sq2/

Just wanted to pose the question and see if this is still an issue and if there was any resolution or possibilities of a resolution.

[nickdevigns]

It's been a few months and I haven't heard anything, I'm guessing this is something far back in the queue. As much as I love this offcanvas menu, this issue is a pretty big deal breaker for anyone who wants to use this on a mobile device. Since I've had plenty of other issues to fix in the project I am using this for, I'm sensing that I might have to look at other offcanvas menu options to use with Bootstrap. Can someone tell me if this will be looked at in the near future, or should I just move on. Thanks!

[nickdevigns]

If anyone is looking for alternatives due to this issue I think this might be a good alternative for a responsive offcanvas menu: http://plugins.adchsm.me/slidebars/

Also, may have some good alternatives here: http://bradfrost.github.io/this-is-responsive/patterns.html http://tympanus.net/Development/MultiLevelPushMenu/index.html

[scl21]

I'm also having this problem. If there is any fix (besides adding an alternate plugin), please share. Thanks!

[scl21]

@nickdevigns I don't know if this helps you out, but changing the off-canvas menu from the left to right side solved this problem for me. It's not ideal to have to change the page orientation but it's better than cutting off the top of the menu.

Change navmenu-fixed-left to navmenu-fixed-right and then float the navbar-toggle to the right. @jasny

[nickdevigns]

Sorry I didn't respond sooner but i finally got around to playing with this. You are correct that when switching from navmenu-fixed-left to navmenu-fixed-right, this does solve the issue (BTW, no need for the navbar-toggle floating to the right, as it works either way).

So it only works when navmenu-fixed-right is used but does not work when navmenu-fixed-left is used - any thoughts on this @jasny?

I tried messing with the css but couldn't find a fix, so I'm thinking this is more js/jquery related. I'll have to re-visit this later this month but in the meantime thinking maybe this troubleshooting could lead the creator to some solution.

[duyn9uyen]

Using navmenu-fixed-right, doesn't seem to animate smoothly in FireFox. I would like the menu to come in from the right. Also, is there a way to control how much the menu pushes in? On an iPhone 4/5 with a view port of 320, the menu slides in too much and the user will have some trouble sliding the menu back out.

I created a JSFiddle here to demonstrate what it looks like in FF. https://jsfiddle.net/pvjL8ezr/

UPDATE: @nickdevigns, Thanks for the recommendation of using http://plugins.adchsm.me/slidebars/. This plugin works great! I got this to work with Bootstrap's navbar menu too. Check out my post on this. There is a LIVE DEMO in the post. https://adevelopersnotes.wordpress.com/2015/05/30/example-slide-menu-using-slidebars/

[scl21]

@nickdevigns True, I only floated the navbar-toggle to the right to keep it visible when the off-canvas menu is open

@duyn9uyen Not sure if you still need this but to change the width of the off-canvas menu add this to your CSS and adjust as needed:

.navmenu,.navbar-offcanvas { width: 200px; }

[jmp1548]

not sure if there has been any progress, but I am also having this issue. The body is not locked when the offcanvas menu is open. For the case I am using it in, it needs to stay fixed to the left.

[Mollie79]

Hi All,

Was facing the same issue. Fixed it by scrolling up, onclick of the nav bar toggle button:

<button type="button" class="navbar-toggle" data-toggle="offcanvas" 
data-target=".navmenu" data-canvas="body" onclick="scrollToTop();return false">

<script type="text/javascript">
var timeOut;
function scrollToTop() {
  if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
    window.scrollBy(0,-150);
    timeOut=setTimeout('scrollToTop()',0);
  }
  else clearTimeout(timeOut);
}
</script>

[jasny]

Fixed by #521