title: Showing different menus using media queries and JQuery
body: <p>I made a hamburger menu for smaller screens. I have it working for small screens but if the menu isn't open prior to making the screen larger the menu doesn't show at all. If the screen is larger and I refresh the page the menu will show. I'd like the menu to switch in real time if the screen reaches a media query breakpoint. Just to be clear, I'd like the full menu to show on larger screens.</p>
  
  <p>I'm using JQuery to show/hide the menu.</p>
  
  <p><a href="https://jsfiddle.net/fabfivefebby/87rywxxv/" rel="nofollow">https://jsfiddle.net/fabfivefebby/87rywxxv/</a></p>
  
  <pre><code>var $hamburger = $('&lt;button id="hamburger"&gt;&amp;#9776;&lt;/button&gt;');
  
  $("header").append($hamburger);
  
  
  // 2. toggle nav with icon
  
  if ($("#hamburger").css("display") === "block") {
  
  $("#nav_container").hide();
  
  $hamburger.click(function(){
  
  $("#nav_container").slideToggle("slow");
  });
  
  } else {
  $("#nav_container").show();
  }
  </code></pre>
  
  <p>Thank you all in advance!</p>