jquery - sidenav - sidebar menu css

Nav desaparece después de cambiar el tamaño

Question

Sitio en cuestión: http://www.mtthwbsh.com

Estoy construyendo un navegador plegable para este sitio y he notado que después de colapsar, si lo expandes y retraes y agrandas la ventana, el navegador desaparece. Traté de cambiar la pantalla para bloquear en mis consultas de medios, pero creo que jQuery lo está anulando. ¿Alguna idea de lo que está causando esto?

Además, me gustaría que la flecha gire 180 grados cuando se hace clic, ¿cómo podría apuntar a esto? Mi jQuery es el siguiente:

/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle();
$(this).toggleClass("active");
});

Answer 1

En style.css , línea no. 1015, consultas de medios utilizadas para max-width:820px

@media (max-width: 820px)

Verifique estas imágenes, navegación visible , navegación oculta (verifique el inspector css)

Answer 2

$(".nav").slideToggle(); parece estar dejando el navegador en una display:none; estado. Cuando configuraste intenté configurar la display:block; en tu consulta de medios usaste !important ?

Editar

Si necesita cambiar el tamaño de pantalla de menos de 570px, debe asegurarse de que en cualquier tamaño superior a 570px se configurará en CSS para mostrar: bloquear;

@media (min-width:571px) {
    .nav { display:block!important; }
}

Esto debería anular adecuadamente la propiedad de visualización.