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 paginapá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(),
}
});