title: Hide/Show Header On Small Screens, But Keep On Bigger Screen Jquery/CSS
body: <p>I am currently adding a Hamburger Bar to my mobile website. I can get the stuff to disappear currently, and then show again. Problem is when I hide/show the divs, it messed up the website on larger screens.</p>
  
  <p>After I hide my menu from the Hamburger button, the header on larger screens then go away. How could I make the Hamburger button show/hide only the header on SMALL screens? Here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"&gt; &lt;/span&gt;
  &lt;span id="headerdisplayloginxs" class="glyphicon glyphicon-user"&gt; &lt;/span&gt;
  &lt;div id="headerrightside"&gt;Content&lt;/div&gt;
  &lt;div id="headerleftside"&gt;Other Content&lt;/div&gt;
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$('#headerdisplaybuttonsxs').click(function() {
      if($('#headerrightside').css('display') == 'none') {
          $('#headerleftside').hide();
          $('#headerrightside').show();
      }
      else {
          $('#headerrightside').hide();
      }
  });
  
  $('#headerdisplayloginxs').click(function() {
      if($('#headerleftside').css('display') == 'none') {
          $('#headerrightside').hide();
          $('#headerleftside').show();
      }
      else {
          $('#headerleftside').hide();
      }
  });
  </code></pre>
  
  <p><strong>So basically how I make the Hamburger Bar only hide/show the divs with a media query of 767px or less?</strong></p>