title: Difficulty toggling media query using Javascript
body: <p><a href="http://cluster4.website-staging.uk/simplyfloors.co.uk/" rel="nofollow">Link to site</a></p>
  
  <p>I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.</p>
  
  <p>Is anyone able to tell me where I'm going wrong please?</p>
  
  <p>Thank you in advance.</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $ = jQuery;
  $(function() {
      //caches a jQuery object containing the header element
      var header = $(".header-widget");
      $(window).scroll(function() {
          var scroll = $(window).scrollTop();
  
          if (scroll &gt;= 20) {
              $(".header-widget").addClass("header-widget-shortheader");
              $(".second-header-widget").addClass("second-header-widget-shortheader");
              $(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
  
          } else {
              $(".header-widget").removeClass("header-widget-shortheader");
              $(".second-header-widget").removeClass(".second-header-widget-shortheader");
              $(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header &amp; Footer')----- */
  @media screen and (min-width: 980px) and (max-width: 1189px) {
  .stickyheader-midscreen-cta-fix {
    margin: 40px 22% 0 0;
    float: right;
  }
  }
  </code></pre>