title: Jquery slideToggle with If/Else statement
body: <p>My if/else statement doesn't work. What I need to do is change the css (margin-top) of the #Scroller-Text. It must happen when the header is clicked which triggers the $nav.slideToggle. It's for a responsive site, so I also need to make sure my code doesn't distort anything in the tablet or desktop view.  </p>
  
  <pre><code>var screensize = document.documentElement.clientWidth;
  
  $(document).ready(function(){
  
      var $window = $(window),
          $nav = $('.link'),
          $button = $('header');
  
      $button.on('click', function (){
          $nav.slideToggle(400);
  
           if($(this).is(':visible')) {
               $('#Text-Scroller').css('margin-top', '60');
           } else {
               $('Text-Scroller').css('margin-top', '102');
           }
      });  
  
      function adjustStyle(width) {
          width = parseInt(width);
          if (width &gt; 600) {
              $nav.show();
          } else {
             $nav.hide();
          }
      }
  
      $(function() {
          adjustStyle($(this).width());
          $(window).resize(function() {
              adjustStyle($(this).width());
          });
      });
  });
  </code></pre>
  
  <p>HTML
      </p>
  
  <pre><code>    &lt;nav&gt;
          &lt;ul id="mobile_active"&gt;
              &lt;li class="link"&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li class="link"&gt;&lt;a href="#"&gt;Creative&lt;/a&gt;&lt;/li&gt;
  
              &lt;li id="logo"&gt;&lt;a href="#"&gt;&lt;img src="links/Logo.png"/&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="link"&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li class="link"&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;header&gt;
          &lt;a class="mobile_menu"&gt;&lt;/a&gt;
      &lt;/header&gt;
  &lt;/div&gt;
  
   &lt;div class="line"&gt;&lt;/div&gt;
  
  &lt;div class="container"&gt;
  
  &lt;div id="G"&gt;
  &lt;img src="links/Image.png"/&gt;
  
  &lt;div id="Text-Scroller"&gt;
  &lt;h1&gt;Headline&lt;/h1&gt;
  &lt;p&gt;Body Copy&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>