JQuery Mobile Menu Working Only On Desktop

Question

I've developed a template for a client that uses a very basic desktop/mobile menu system that switches based on css media queries.

I've used this method for a several other sites without difficulty, however this one is proving more difficult. Essentially, the mobile menu will drop down when clicked in the desktop environment, but will not appear in the mobile environment when the trigger is clicked.

The trigger is based in JQuery, using the .click() method.

Here is the site in it's dev environment: dev.thinkswift.com

A few notes: 1. Jquery .click() DOES work in the mobile environment, there are extensive examples of this. 2. The function IS firing, I tried adding a console log to make sure and it executed just fine.

Any ideas?

Answer 1

In style.css (line: 130) try to remove 2 lines:

#top-nav {
    position:fixed;
    z-index:999;
    top:0px;
    left:0px;
    font-family: 'Roboto Condensed', sans-serif;
    /* overflow:hidden; */
    /* height:50px; */
    box-shadow:0px 2px 4px rgba(0,0,0,0.3);
    background:#fff;
}

With limit 50px of height you made a thin viewport for your menu. Fixed height of parent didn't allow child container ( #mobile-menu-dropdown ) to expand its parent ( #top-nav ).

And jquery code that shows/hides menu looks a little clumsy. You can make it much shorter. This:

$('#mobile-menu-toggle').click(function(){
    if ( $('#mobile-menu-dropdown').is(':visible')) {
        $('#mobile-menu-dropdown').hide();       
    } else {
        $('#mobile-menu-dropdown').show();
    }
});

may be replaced with this

$('#mobile-menu-toggle').click(function(){
        $('#mobile-menu-dropdown').toggle();
});

without functionality lost.