Joomla's messing the mobile menu up

Question

I have multiple issues with this practice site. It worked perfectly fine on desktop until it was loaded on Joomla. Now the menu is always in open state and when I hide it, it hides itself on desktop and tablet too. Boo.

Here's the link to the site: http://dgm3740.inkedkeyboard.com/joomla/

And here's the js script I've been using:

$(document).ready(function() {
    //$(function(){
        $('#showPhoneNav').click(function() {
            $(".primary-nav").slideToggle('normal', function(){ //Shows Nav area
                if ($('.primary-nav').is(':visible')) {
                    $('#showPhoneNav').text('Hide Menu');
                } else {
                    $('#showPhoneNav').empty();
                    $('#showPhoneNav:first-child').append('<img src="http://dgm3740.inkedkeyboard.com/joomla/templates/varyastemplate/img/menuIcon.png" alt="navigation icon" />');
                } //end of if
            }); //end of slidetoggle
        }); //end of myNav
    //}); //end showPhoneNav
}); //end of ready

Answer 1

Checking the URL you provided shows the following basic Javascript error:

TypeError: 'undefined' is not a function (evaluating '$('#main-slider').flexslider({
        animation:      "slide",
        slideshowSpeed: 4000, 
        animationSpeed: 300
    })')

A quick check of the page shows that main-slider is not found anywhere in the html, did you remove it after posting the question?

Alternatively, looking at the headers for that page I can also see that you have both jQuery and Mootools loaded:

<script src="/joomla/media/jui/js/jquery.min.js" type="text/javascript"></script>
...
<script src="/joomla/media/system/js/mootools-core.js" type="text/javascript"></script>

It could be a conflict between the two (possibly but unlikely) without the main-slider element on the page it's hard to resolve the issue further.