Foundation off canvas menu always visible on mobile

Question

Currently on this site the off canvas menu is always visible for mobile and small desktop screens... Can anyone tell me what I am doing wrong?

The site is built using the Joints WP theme based upon the Zurb Foundation framework.

Thanks in advance, Adam

Answer 1

You have the error in the console:

Uncaught TypeError: $ is not a function

That suggests you have a jQuery problem and Foundation uses jQuery to hide the (not relevant) portion of the navigation on small / large screens.

I'm going to guess that if you change this:

$(document).ready(function() {
    var temp = "";
    $(':input').click(function() {
        temp = $(this).attr('placeholder');
        $(this).attr('placeholder','');
        $(this).blur(function() {
            $(this).attr('placeholder',temp);
        });
    });
});

To this:

jQuery(document).ready(function() {
    var temp = "";
    jQuery(':input').click(function() {
        temp = jQuery(this).attr('placeholder');
        jQuery(this).attr('placeholder','');
        jQuery(this).blur(function() {
            jQuery(this).attr('placeholder',temp);
        });
    });
});

In script.js

Things may work (though I have not checked the voracity of the code).

Have a look at http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ for more information on how jQuery can run into conflicts.