title: Jquery toggles menu for mobile, potentially leaves it off when resized up to desktop
body: <p>I'm currently working on a responsive site with a horizontal navigation menu and switches to a clickable menu icon that expands for mobile. The menu looks fine at desktop resolution and works great on mobile. </p>
  
  <p>My problem happens if I scale my browser down past my resolution breakpoint. It switches to the mobile menu icon and hides my standard menu. If i click the icon the menu shows up. click it again it goes away. everything is fine. When I scale the browser back up the original menu will show up if i left the mobile toggled visible and if i didn't activate the toggle in the first place but if i activate it, then close the mobile menu, then scale back up, the standard menu keeps the toggle hidden aspect and never reappears. </p>
  
  <p>As far as I can tell, I would need the jquery to force the toggle back to visible when i scale back up past my media query breakpoint. but I have no idea how to do that and I haven't found this problem elsewhere online.</p>
  
  <pre><code>$("#menu-icon").on("click", function(){
          $("#nav").slideToggle();
          $(this).toggleClass("active");
      });
  </code></pre>
  
  <p>is the function I was using:</p>
  
  <pre><code>&lt;nav id="nav-wrap"&gt;
          &lt;div id="menu-icon"&gt;&lt;img src="../img/menu.png"&gt;&lt;/div&gt;
          &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="default.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="obstacles.htm"&gt;Obstacles&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="location.htm"&gt;Location&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="register.htm"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="sponsor.htm"&gt;Sponsor&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="volunteer.htm"&gt;Volunteer&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="faqs.htm"&gt;FAQs/Documents&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>is my navigation menu and:</p>
  
  <pre><code>#nav {
      text-align:center;
      font-size:1em;
      text-transform:uppercase;
      font-weight:900;
      margin:1em auto;
      display:block;
  }
  #nav li {
      display:inline;
      text-align:center;
      margin:1em 2em;
  }
  #menu-icon {
      display:none;
  }
  @media screen and (max-width:600px) {
  #menu-icon {
      width:30px;
      height:30px;
      cursor:pointer;
      display:block;
      margin:0em auto 1em auto;
  }
  #nav {
      clear:both;
      z-index:10000;
      padding:5px;
      background:#000;
      border:solid 1px #f1f1eb;
      display:none;
  }
  }
  </code></pre>
  
  <p>edit: i forgot to add. I tried to work around this by using a separate nav with a different ID that would go hidden when it scaled down, but that had the opposite problem, where half the time I'd scale back up and have 2 nav menus because the jquery #nav would be toggled on</p>