Navigation opens and immediately closes again on the Androids default "Internet" browser.

Hey there,

When I try and update modernizer to a custom version of my own—few extra check (html class names)—I seem to get an error with your main.js code on line 53.

Uncaught TypeError: Object #<Object> has no method 'prefixed'

Any help with resolving this would be great. I have tried looking around to find an answer before posting here and tried debugging it myself though I don't know a great deal about JS, although I'm trying to learn it.

Thanks
Dan

Hi everyone,

I'm trying to open an external link to another page with one of the menu links, but the menu just closes and does nothing.
Any ideas on how I can solve this. Thanks.

When linking to a page anchor on the mobile size the header menu disappears. See an example here: http://www.portplus.com/storage/paul/mobile-test/

This is caused by overflow: hidden on #outer-wrap. Removing it allows named anchors to be linked to on page without hiding the menu however it allows you to scroll to the right when the menu is open.

Thoughts?

First let me say what a fantastic off canvas navigation, the best one I have seen.
However, I seem to have found a possible bug but not sure what is causing this, if anyone can shed any light or a fix?

So if you view the site on landscape orientation on iOS and open/close the menu. When you change orientation to portrait, the page breaks and the menu/off canvas area suddenly appears and overlaps the page, but without any content or ability to remove this. The navigation was closed so not sure why this suddenly appears.

I have a screenshot of the after effect here:
http://cl.ly/image/190m1x2E2w0h

I first spotted this on my one page after implementing the navigation, so immediate thought I had borked the code somehow, but I checked the original example and it is the same on there too...
http://bit.ly/offcanvas4

Any ideas?

Hi there,

I'm adapting this for use on my site, and I'm running into a strange issue. When The nav is open and I click a link the menu closes, but the page does not reload to the new content. It is not a z-index issue, and may be due to a conflicting style, but I haven't found it yet. Has anyone else had this happen and what did you do to fix it?
Kristin

Thanks for the great tool, it works like a charm. However, I noticed a small bug(?) on Chrome (Mac). When you resize the browser down to show the menu, it works well. But when you increase the browser width, and when the menu icon about to disappear, you will notice a small gap between the browser and the webpage, keep on increasing the browser width, the gap will gone and everything appears normal again. This only shows in Chrome, works well on Safari and Firefox for me. Any thought?

Example using: http://dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html

I´m trying to implement the off-canvas menu into my existing website. My question is: why position: fixed doesn´t function?

Great work here - I like what you've got so far.

In Safari, it looks like rounding differences are producing a pixel wide border on either side of #inner-wrap, depending on the browser width. When then background is dark, like your demos, it is hardly noticable (except it does overlap the .is-active arrow - see attached). If you wratchet up the contrast however, the gaps become clear.

Nothing I've tried was successful. Any thoughts?

Just spent 45 minutes trying to integrate this code, totally confused about what wasn't working. Anyway, main.js worked, main.jquery.js didn't work.

I tested the repo with jQuery 1.6.4 all the way up to 1.9.1.

Firstly, thanks for this - its the best off-canvas implementation I've seen, most importantly, it feels good when in use..

To help 'close the gap' with native apps further, I think this would really benefit from some additions:

• Touch/swipe support
• ability to have multiple menus (ie. menu on left and/or right)
• scrollable menu independent of main content (as facebook native app - so if there were a lot of items in the menu they could be scrolled into view)
• ability to tap/click off-menu to close the nav

As mentioned in the smashing-mag post, Hammer.js looks like it could help with the touch events. I also found this recently which is the best swipe-able off-canvas nav I've found (most others I found are too 'twitchy' and don't have a native feel). However it lacks the finesse of this menu and I think uses Jquery for the animations.

I'm currently learning javascript and jquery so have limited skills to implement what I've mentioned - It would be really helpful if anybody has any resources or forks which have these additional functionality mentioned to share?

From my limited to reading on the matter, for elements that are not links or buttons, iOS doesn’t translate click events to ontouchstart; therefore touching outside the menu doesn’t work in iOS.

I have found on devices using older versions of Jelly Bean (in my case I'm using a Galaxy S3 with 4.1.2) that when the navigation is open, clicking 'nav-open-btn' does not close the navigation. Clicking outside the navigation below that button does close the navigation as intended.

Hello
Thank you for the code, I want to know if it is possible to change the code such way that the menu is right and not left as now
thank you

I'm assuming you're fine with anybody using the code in this repository for any reason, but it's always nice to have official confirmation.

Did anyone try making footer stick to bottom no matter what is content's height? It's not hard with simple css, but since footer and all content wrapped in outer-wrap & inner-wrap it's kind of a challenge. Thanks!

Is there a reason these are defined before app.init as the DOM might not always be ready if the script is loaded early ?

        var inner = document.getElementById('inner-wrap'),
            nav_open = false,
            nav_class = 'js-nav';

Hi I try to use this cool snippet with bootstrap griding but doesn't seems to work together. What should I change to make it usable? so my murkup looks like

Book Navigation

<nav id="sidebar-nav" role="navigation">
    <div class="block">
        <h2 class="block-title"></h2>
        <?php bones_main_nav(); ?> 
        <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
    </div>
</nav>

<div id="right_sidebar_widgets">
    <?php dynamic_sidebar('sidebar1'); ?>
</div>

if I remove class="col-md-3 col-sm-3" than it's working but the griding is out