CODEWITHSUNDEEP
javascriptjquerynavigationresponsive-design
Aaron Brewer
Aaron Brewer

Reputation: 3667

Responsive Navigation Menu Resize?

I am trying to build an extremely simple responsive navigation menu. Am having some problems here.

  1. When I resize the window equal to or lower than 768px in width, the responsive menu will not work.
  2. When I refresh the page at a lower window width equal to or less than 768px, the responsive navigation works... But, if I resize even by one pixel, the responsive navigation display is hidden again.

I have created a CodePen here: http://codepen.io/anon/pen/fHsti

Thank you so much for your help!

Upvotes: 2

Views: 1151

Answers (2)

Adam Simpson
Adam Simpson

Reputation: 3681

Honestly the best way to approach this is to only use JS for managing the state of the nav between media queries, everything else should be tucked away in media queries. Something like MediaCheck or matchMedia is a great way to tie media queries and JS together.

I created a simple demo using your markup, and I think I got the functionality you were looking for. I used mediaCheck to clear away any JS-imposed inline styles between the main breakpoint of 768px.

Upvotes: 3

musicnothing
musicnothing

Reputation: 3985

Change this code. You need the if statement inside the event handler, otherwise it only binds the event if the width of the window is less than 768px on load.

jQuery("nav p.active").on("click", function(){
  if (jQuery(window).width() <= 768) {
    jQuery("nav ul").toggle("fast");
  }
});

http://codepen.io/anon/pen/BHbon

Upvotes: 3

Related Questions