Trouble with a responsive menu and jQuery's slideToggle
Jan 18, 2016
Trouble with a responsive menu and jQuery’s slideToggle
I’m building a responsive navigation menu and I’m having trouble getting the nav items to become visible upon calling jQuery’s slideToggle(). The menu items (.nav_item) collapse appropriately, and then become invisible when the viewport is <640px, the first menu item (#nav_menu) “Menu” then becomes the only item visible. Upon clicking, I’d like the buttons to reappear and slide down below the menu button. When I click, however, nothing happens and the menu items remain invisible. If I take out display: none !important; from the menu items, they successfully toggle (but are visible the whole time). Does anyone know what’s going wrong? Thanks.
Even though jQuery’s .slideToggle() method adds inline styling, it still wasn’t having an effect when the screen size was less than 640px because you were using !important.
More specifically, the above styling in your media query was overwriting the styling added by jQuery:
To solve this, remove all instances of !important in your stylesheet and re-structure the styling with the specificity issues in mind. If I were you, I would avoid using id’s like this. Simple classes would suffice and help avoid future issues like this. Without changing any HTML, though, this would work:
Since you’re already using jQuery, use the resize event to remove the jQuery styling when the screen size wider than 640px.