Question

I am trying to create some responsive navigation similar to Boostrap’s, but am having some issues. Here is what I have now: http://jsfiddle.net/apautler/eqAZz/. It may be difficult to tell in the example, but the navigation disappears when you go from small to large with the screen. I know the reason for this is that the jQuery is checking if the screen size is under 992px at load. If it is, it hides the navigation. Then when you enlarge the page the navigation is still hidden. I need to somehow have it reassess as the page resizes. I think there is a jQuery resize() funciton, but that didn’t seem to work. Any ideas?

I am also open to starting over if there is a better way to build it altogether. Thanks for the help!

Answer 1

It would be much easier to use CSS3 Media queries.

@media all and (max-width:500px) { 
     .navigation {display:none;}
}