Question

Using jQuery I need to remove this html code and the {menu} tag inside when the browser or window is resized to a smaller screen size for responsive web design.

<div id="menu">{menu}</div>

I’m new to jQuery so any help or advice will be greatly appreciated.

Answer 1

You don’t necessarily need to use jQuery, just add a media query to your style sheet:

@media screen and (max-width:480px)
{
    #menu { display: none; }
}

This way, if the screen happens to change (e.g. goes to landscape, or perhaps the browser is resized), the menu will re-appear again.