title: How do I make this jQuery mobile navigation script trigger only on small screens?
body: <p>My jQuery is not very good - I'm trying to learn by piecing together bits of existing scripts but not having very much luck. I'm trying to get a menu on a Wordpress website to act as a normal horizontal navigation bar on large screen sizes and to become a jQuery dropdown on widths below 980px - I've got the dropdown working but can't figure out how to get it to work <em>only</em> on small screen sizes.</p>
  
  <p>The code that works is:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($) {
      $("#mmenu").hide();
      $(".mtoggle").click(function() {
          $("#mmenu").slideToggle(500);
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But obviously it hides the horizontal navigation on large screen sizes too.</p>
  
  <p>I've tried </p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($) {
      if($(window).width() &lt; 979) {
      $("#mmenu").hide();
      $(".mtoggle").click(function() {
          $("#mmenu").slideToggle(500);
      }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>but it seems to break the code completely and make it entirely non-functional and I can't figure out why. </p>
  
  <p>The website in question is <a href="http://host26.qnop.net/~fpsl/" rel="nofollow">http://host26.qnop.net/~fpsl/</a> if seeing the menu in context would be helpful. </p>
  
  <p>Any advice would be very much appreciated - thank you!</p>