Mobile menu not opening on click…

Question

I tried recreating the issue in a jsFiddle, but wasn't able to.

There's a link to my site here ...

It's a responsive site, but the menu isn't working and I can't figure out why. Wondering if someone might be able to point me in the right direction.

Here's the script for the menu...

$(function() {

    var mobileMenu  = $('.mobile-menu');
        menu        = $('#menu ul');
        menuHeight  = menu.height();

    $(mobileMenu).on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 760 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });

});

I've gone through everything I know of and double-checked my work. The menu simply won't open when clicked on.

Thoughts?

Answer 1

layout.css, line 599, try changing display: none; to display: block; :

#menu {
    height: auto;
    width: 100%;
    display: block;
}

To hide the menu onclick, you could try something like this:

$('#menu a').each(function() {
    $(this).click(function() {
        $('#menu').slideUp();
    };
});

You could also use $('#menu').hide(); if you dislike the animation.