title: mobile navigation disappears upon scrolling
body: <p>I'm trying to build a responsive site and am having some difficulty with the mobile menu. When I scroll through the page on my mobile device the menu disappears. I would like it to solely be controlled by clicking on the header (which has hide/show jquery code). I am also running into problems with the submenu dropdowns - they are overwriting my main categories - if anyone has any advice or resources on this issue as well I would appreciate it. Thank you.</p>
  
  <p>Source Code</p>
  
  <pre><code>&lt;header&gt;&lt;a class="mobile_menu"&gt;&lt;/a&gt;&lt;/header&gt;
  
  &lt;nav&gt;
      &lt;ul id="mobile_active"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Corporate Profile&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;News, Updates &amp; Articles&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Partners&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Our Technology&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Clean Energy Overview&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Statistics&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Photo Gallery&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Video&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Social Media&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#mobile_active { 
  display:none;
  padding:0;
  margin:0;}
  
  a.mobile_menu {
  display:block;
  width:100%;
  height:35px;
  background:#395f96 
  url(../links/mobile_link_menu.png)no-repeat 4px 4px;
  position:absolute;
  top:0px;
  cursor:pointer;}
  
  a.mobile_menu.selected {
  background-position: 4px -26px;}
  #mobile_active li a {
  padding-top:0.5em;}
  
  #mobile_active ul li a {
  padding:0.5;    
  line-height:2em;}
  
  nav {
  width:100%;
  height:auto;    
  position:relative;}
  
  nav ul { 
  list-style:none;
  display:block;
  margin:0 auto;}
  
  nav ul li {
  width:100%;
  margin:0;
  padding:0;
  position:relative;
  background-color:#FFF;}
  
  nav ul li a {
  color: #353433;
  font-size:1em;
  text-align:center;
  border-bottom: 1px solid #CCC;
  display:block;
  padding:3%;
  width:94%;
  margin:0;}
  
  nav ul ul {
  position:absolute;
  visibility:hidden;
  display:none;
  background-color:#FFF;
  border: 0px solid #CCC;
  width:100%;}
  
  nav ul li a:hover { 
  color: #395f96;
  background-color:#e4ecf7;}
  
  nav ul ul li:hover {
  background: #e4ecf7;
  width:100%;}
  
  #mobile_active li ul li a {
  display:none;}
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>var screensize = document.documentElement.clientWidth;
  $(document).ready(function(){
  
  var resizeTimer;
  $(window).on('resize', function (e) {
  clearTimeout(resizeTimer);
  
  resizeTimer = setTimeout(function () {
      if ($(window).width() &gt;= 600) {
          $('#mobile_active').show();
      } else {
          $('#mobile_active').hide(); }
  }, 50);
  });
  
  $('header').on('click touch', function() {
  $('#mobile_active').slideToggle(500);
  e.preventDefault();
  });
  
  $('#mobile_active li a').on('click touch',function() {
  $( '#mobile_active li ul li a' ).slideToggle(150);
  e.preventDefault();
  
  });
  });
  </code></pre>