title: Bootstrap Slide in Navbar Clean Up jQuery remove active when user resizes to the min-width
body: <p>I have this script below working well but I can't figure out how to do 1 thing:</p>
  <p><strong>A:</strong> When a user sizes to below the min-width threshold and clicks the toggle to view the menu and then just resizes back to &gt; 767 -- though highly unlikely in real world situations -- the .slide-active class is still there and I can't figure out how to get rid of it. I can fake it with the css (which I've done) but it'd be nice to actually remove it when it's large, tried wrapping the script in an if .navbar-toggle is visible and it only worked on reload, so can't have that.</p>
  <hr />
  <h3>DEMO:</h3>
  <p><strong><a href="http://jsbin.com/ucARonA/1/edit" rel="nofollow noreferrer">http://jsbin.com/ucARonA/1/edit</a></strong></p>
  <p><strong><a href="http://jsbin.com/ucARonA/1" rel="nofollow noreferrer">http://jsbin.com/ucARonA/1</a></strong></p>
  <hr />
  <pre><code>$(document).ready(function () {
  
      //stick in the fixed 100% height behind the navbar but don't wrap it
      $('#slide-nav.navbar .container').
          append($('&lt;div id=&quot;navbar-height-col&quot;&gt;&lt;/div&gt;'));
  
      // Enter your ids or classes
          var toggler = '.navbar-toggle';
          var pagewrapper = '#page-content';
          var navigationwrapper = '.navbar-header';
          var menuwidth = '100%'; // the menu inside the slide menu itself
          var slidewidth = '80%';
          var menuneg = '-100%';
          var slideneg = '-80%';
  
  
      $(&quot;#slide-nav&quot;).on(&quot;click&quot;, toggler, function (e) {
        
          var selected = $(this).hasClass('slide-active');
  
          $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
          });
  
          $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
          });
  
          $(pagewrapper).stop().animate({
              left: selected ? '0px' : slidewidth
          });
  
          $(navigationwrapper).stop().animate({
              left: selected ? '0px' : slidewidth
          });
  
          $(this).toggleClass('slide-active', !selected);
          $('#slidemenu').toggleClass('slide-active');
  
          $('#page-content, .navbar, body, .navbar-header').
              toggleClass('slide-active');
  
      });
  
  });
  </code></pre>