Issue with Mobile Menu on Website

Question

Hopefully this is the last time I will need to ask for your guys help: Website 3six-d.co.uk

Everything if fine on the normal website, issueshowever appear when I try to use it on mobiles.

http://mobiletest.me/iphone_5_emulator/#u=http://3six-d.co.uk/index.html

I'm giving that link to show you, but the same occurrence happens on my phone aswell.

This is the relevant code in the .js file (I could be wrong but I think it is)

$(function() {  
    var trigger = $('#responsive-nav');  
        menu = $('#main-nav ul');

    $(trigger).on('click', function(e) {  
        e.preventDefault();  
        menu.slideToggle();
        $(this).toggleClass('nav-visible');
    }); 

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

A weird ocurance was, that initially the jQuery was being called at the end of the html and it worked fine, but it was necessary to move it to the top for Fancybox and other scripts I am running. That is what is causing the problem, as soon as the following code is at the stop of the HTML document, the navigation menu stops working on mobiles and tablets:

<script type="text/javascript" src="js/jquery.min.js"></script>

Any ideas guys, would really appreciate some help!

Answer 1

did you try using a timeout to see if it's a race condition?