##Actualización: Viendo un poco tu código completo (css incluido), el primer problema nace al hacer hide en primer lugar. Esto no es necesario por que el `header nav` ya esta invisible con CSS y media queries: establece `display: none;` (cuando la pantalla tiene menos de 700 px, fijate en estilos.css linea 620). Por otra parte al poner 2 manejadores de click separados se pisan los estilos. Eso es considerado una mala practica si vas modificar los mismos elementos. El segundo problema es que el animate que cierra el menu hacia la izq, deja la propiedad style así: `style="left: -100%";`, haciendo al agrandar la pantalla, el menu este visible pero desplazado hacia la izquierda todo el ancho de la pantalla, lo que impide verlo :S, por lo que debemos reestablecer esta propiedad al cambiar a la version ancha. Esto lo hice utilizando el evento `resize` y `removeAttr` Si reemplazas `main.js` por lo siguiente, todo debería funcionar como esperas. $(document).ready(function() { // maneja la apertura del menu var estado = 0; $(".menu_bar").click(function() { // la primera vez de abre desde arriba if (estado === 0) { $("header nav").slideToggle("slow"); estado = 1; } else // se cierra hacia la izquierda if (estado === 1) { $('nav').animate({ left: "0" }); estado = 2; } else // las veces siguientes se abre desde la izquierda if (estado === 2) { $("nav").animate({ left: "-100%" }); estado = 1; } }); // $(menu).click // limpia los vestigios de la animacion $(window).resize(function() { // aqui se decide si se vuelve a mostrar el menu (pantalla grande) if (window.matchMedia("(min-width: 699px)").matches) { $("header nav").removeAttr('style'); // restablecemos los estilos de la animacion } }); // $(win).redize }); // $(doc).ready Déjame saber si tienes algún problema.