Navigation Menu not rendering in browser

Question

I made a navigation menu for my website to be used when people access the site on their phone. For some reason, I can see this working only on the fiddle I made, but not when I test it in my browser.

I've tested it with Chrome, and the latest version of IE, but I don't see the responsive navigation menu I made when I shrink my browser's size.

This is exactly what my javascript file looks like:

$("#nav").addClass("js").before('<div id="menu">&#9776; MENU </div>');
$("#menu").click(function(){
    $("#nav").toggle();

});

$(window).resize(function(){
    if(window.innerWidth > 768){
        $("#nav").removeAttr("style");

    }
});

Here is my fiddle:

http://jsfiddle.net/Nuxj6/

And my CSS file and HTML file have the same code as in the fiddle. The only thing that is different is that I have another CSS file for the rest of my site. This CSS file is only for the navigation menu. I tried importing the CSS file with the navigation menu into my main CSS file, but it didn't work either.

I would appreciate any advice on fixing this issue. As I said, it works in the fiddle, but not in my browser. Thanks in advance.

Answer 1

You should run your code when DOM is ready or #nav is parsed by browser, or jQuery cannot find #nav . So you may have 2 alternative ways:

• Run your code when Dom is ready just like:

   $(function() { $("#nav").addClass("js").before('<div id="menu">&#9776; MENU </div>'); $("#menu").click(function(){ $("#nav").toggle(); }); $(window).resize(function(){ if(window.innerWidth > 768){ $("#nav").removeAttr("style"); } }); }); 

• Put your js code at the bottom of your HTML.

Why jsfiddle works?

That's because jsfiddle will wrap js code with $(window).load like below if you use jQuery:

$(window).load(function(){
    $("#nav").addClass("js").before('<div id="menu">&#9776; MENU </div>');
    ...
});