Mobile navigation works on desktop resize but not on mobile devices

Question

I'm using the mobile navigation module for a responsive menu, and it works perfect if I resize the browser window on my desktop, but it won't work on actual mobile devices (tested on iPhone and Galaxy Note 2). I've used the module before and never had any issues, and I'm using the same configuration, as far as I can tell. I can't figure out why it's not working.

This is the site I'm working on, and here's a screenshot of the problem on the Note 2. I recently upgraded my server from PHP 5.2 to 5.3, but I don't think that could be causing this issue (plus I needed to upgrade for a different module).

Other than that I really have no clue, so I'd appreciate your help.

Answer 1

There is a jQuery error happening on your webpage.

You need to fix that either by trying var $ = jQuery.noconflit(); OR Update the version of jQuery to 1.7, don't upgrade to version higher than 1.7 since jQuery 'on' function will not work.

Thank, Vineeth

Answer 2

This just happened to me, and I hope that it will save someone the frustration that I have felt:

The responsive menu not appear at screen width < 480px? I was so frustrated with this until I, with the help of Him, figured out the bug. I tried changing the jquery and messed with the .module file associated with it, but still I couldn't get it to work.... until now: The code for it was this:

.responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple {
position: absolute;
z-index: 999;
top: auto;
}

For some reason beyond me, it works well on screen sizes > 480px, but as soon as it hits that size, it just doesn't work. Here is to code to get it to work on screen sizes < 480px:

@media only screen and (max-width:480px){
        .responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple {
        position: relative;
    }
}

Hope that helps someone!