Issues with larger screen and touch gesture

[GuerrillaCoder]

Hey, great script! I really like how it looks but I have a few issues with it.

I have altered the SASS variable to make menu appear in ipad portrait mode.

$screen-xs-max:                   991px !default;

I have also increased the @grid-float-breakpoint collapse breakpoint in main bootstrap SASS.

It works but there are some issues.

When trying to drag the menu from the left it is tricky to find the right part of the screen to swipe. There is a small gutter to the very left of the screen where the swipe is not recognised (I am guessing the standard bootstrap container margin), then there is a thin strip where if I swipe right it will pull the menu out and then the rest of the screen will not recognise the swipe gesture to pull out the menu.

I guess it is meant to be a thin bar that the finger can slide over but it doesn't work like this. If the swipe is not initiated directly on the right place then the menu doesn't slide in.

This is somewhat noticeable on the small mobile screen but it extremely noticeable on ipad in portrait.

When I emulate the swipe in chrome dev tools the menu comes in at full height but on my actual ipad 2 then the menu comes in at 50% height.

When using the toggle button it will come in at 50% height and then quickly resize to 100%..

When using a swipe gesture it comes in at 50% height and stays that height. If I tap the top half of the screen it will resize to 100%. If I tap the bottom half of screen the menu dissapears.

I tried using your example in case I did something wrong but I got the same result.

I am not very good at javasript so not really sure how to go about debugging this.

Any ideas?

[anta88]

EDIT: I solved this by pure CSS, it might not be a clean solution but it works. I'll post the hack tomorrow in case someone needs to do the same.

Hi, I'm also trying to make the menu appear on tablets (and possibly desktops).

In the "Customizing" paragraph of the instruction I read:
_

There is one media query and this uses the Bootstrap $screen-xs-max variable. If this isn't present, then the width of 767px is used for the breakpoint.

_

So I have altered the SASS variable $screen-xs-max to 991px in _vars.scss, then compiled bootstrap.offcanvas.scss.
I put the output bootstrap.offcanvas.css in my project and I see that the change took effect, the first media query is now:

@media (max-width: 991px) {
  .offcanvas-stop-scrolling {
    height: 100%;
    overflow: hidden; }

However I didn't notice any visible change on the website. So as guerrillacoder suggested I tried to increase the @grid-float-breakpoint with the bootstrap customizer on getbootstrap.com/customize.
I set it from @screen-sm-min to @screen-sm-md which is set to 992px.
When I did this the navbar became collapsed also in the range 768px-991px but with the standard Bootstrap navbar behavior (all the links one below another) and not with the offcanvas plugin behavior.
If i click the burger button then the menu becomes fullscreen and the close doesn't work.

What am I doing wrong?

@iamphill any help please? I'm stuck with this T_T

EDIT: I solved this by pure CSS, it might not be a clean solution but it works. I'll post the hack tomorrow in case someone needs to do the same.

[anta88]

Ok, here is what i did for the record. It's not elegant but it works.
Instead of altering the Bootstrap grid system and editing the SASS of the add-on, I just used CSS to override the behaviour at width >=768px and make it work as it does at lower resolutions.
These are the rules I put in my custom CSS:

@media screen and (min-width: 768px) and (max-width: 8991px) {
.navbar-offcanvas {
position: fixed;
width: 100%;
max-width: 250px;
left: -250px;
top: 0;
padding-left: 15px;
padding-right: 15px;
z-index: 999;
overflow: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
.navbar-nav>li {
float: none;
}
.navbar-offcanvas.offcanvas-transform.in {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.navbar-toggle {
display: block;
}
.navbar-header {
width: 100%;
}
}