I have a problem when making my page responsive .
It happens that by reducing the size of the screen, my normal menu disappears so that a smaller one appears as for a device with a button that hides and displays my sections.
The problem is that when I press the button and hide the menu, if I enlarge the resolution again, the normal menu reappears but with the buttons hidden.
This is the link to my page that contains the following code:
$(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(),
}
});