title: Desktop menu disappears after mobile menu is activated/deactivated and resized
body: <p>The site is a responsive site and this is how you duplicate the issue:</p>
  
  <ol>
  <li>Load website at desktop width (nav element loads fine). </li>
  <li>Resize to tablet or mobile size (menu is converted to mobile-style drop-down menu with three bar icon. </li>
  <li>Open and close the mobile nav menu (It is set to display:none). </li>
  <li>Now, when you resize to desktop width, the nav bar remains set to display: none.</li>
  </ol>
  
  <p>I am aware that I could solve the issue by creating two menu bars and just applying separate ids to them, but I wanted to see if anyone had a solution to allow me to only have to maintain one menu. </p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
          &lt;li id="information"&gt;
              &lt;a href="#"&gt;Why We're Different&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="services"&gt;
              &lt;a&gt;GPA Services&lt;/a&gt;
              &lt;ul id="servicesmenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HealthWatch&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ClaimWatch&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Administrative Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Marketing and Sales&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Specialty Services&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id="login"&gt;&lt;a&gt;Login&lt;/a&gt;
              &lt;ul id="loginmenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Employers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Members&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Brokers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Providers&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;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The jQuery:</p>
  
  <pre><code>$( document ).ready(function() {
    $("#menu-icon").click(function() {
          $("#menu").slideToggle(); 
    });
      $("#services").click(function() {
          $("#loginmenu").slideUp();
          $("#servicesmenu").slideToggle();
      });
      $("#login").click(function() {
          $("#servicesmenu").slideUp();
          $("#loginmenu").slideToggle();
      });
      $('html').click(function() {
          $("#loginmenu").slideUp();
          $("#servicesmenu").slideUp();
      });
      $('#login, #loginmenu, #services, #servicesmenu').click(function(event){
          event.stopPropagation();
      });
  });
  </code></pre>
  
  <p>Or you can view a test version of the page here (note: the page/images have not been optimized for load time, so the sizes of some of the images make the load times a little long):</p>
  
  <p><a href="http://test.digital-scorpion.com/gpa/index.php" rel="nofollow noreferrer">http://test.digital-scorpion.com/gpa/index.php</a></p>