Question

Site in question: http://www.mtthwbsh.com

I’m building a collapsable nav for this site and have noticed that after it collapses, if you expand and retract it and enlarge the window again the nav disappears. I tried changing the display to block at my media queries but I think the jQuery is overriding it. Any idea what’s causing this?

Also, I’d like the arrow to rotate 180 degrees when clicked, how would I target this? My jQuery is as follows:

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

Answer 1

$(".nav").slideToggle(); appears to be leaving the nav in a display:none; state. When you set tried to set the display:block; in your media query did you use !important?

Edit

If your screen size less than 570px needs to be toggled, then you need to make sure that at any size above 570px it will be set in CSS to display:block;

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

This should adequately override the display property.