Tengo un inconveniente al hacer responsive mi página.
Sucede que al reducir el tamaño de la pantalla, mi menú normal desaparece para que aparezca uno mas chico como para dispositivo con un botón que se oculta y despliega mis secciones.
El problema está en que al apretar el botón y ocultar el menú, si vuelvo a agrandar la resolución, el menú normal vuelve a aparecer pero con los botones ocultos.
Éste es el enlace de mi página que contiene el siguiente código:
$(document).ready(main);
var contador = 1;
function main() {
$("header nav").hide(); //Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
$("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
}); //Terminamos la Funcion del Click
$(".menu_bar").click(function() {
if (contador == 1) {
$('nav').animate({
left: "0"
});
contador = 0;
} else {
contador = 1;
$("nav").animate({
left: "-100%"
});
}
});
}
$(window).resize(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$("header nav").addClass("show"); //Mostramos el menu
// si estas utilizando hide(), quizá deberías usar show(),
}
});