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(),
}
});
Looking a little at your complete code (css included), the first problem arises when you hide in the first place. This is not necessary because it is
header nav
already invisible with CSS and media queries: setdisplay: none;
(when the screen is less than 700px, look at styles.css line 620). On the other hand by putting 2 separate click handlers the styles are stepped on. That is considered a bad practice if you are going to modify the same elements.The second problem is that the animate that closes the menu to the left leaves the style property like this:
style="left: -100%";
, causing the menu to be visible when enlarging the screen, but displaced to the left the entire width of the screen, which prevents it from being seen: Yes, so we need to reset this property when switching to the wide version. I did this using the eventresize
andremoveAttr
If you replace
main.js
with the following, everything should work as you expect.Simply use the properties of the object
window
to determine your behavior, normally width should suffice, but you can also consider height.