title: Menu won't slide back up once user go to new page
body: <p>I'm creating a web app that has a custom responsive menu. It's just your basic three list-item menu dropdown. When user clicks "hamburger" icon, it slides down. When they click on the "X", it slides up.</p>
  
  <p>The problem having is that when the user clicks the "hamburger" icon in the mobile menu's closed state and then they click another link on the page outside of the mobile menu, the menu stays in its open/slid down state and becomes unusable unless the user reloads the page.</p>
  
  <p>What do I need to put in my JS function or my CSS to prevent this behavior? I appreciate the help.</p>
  
  <p>The code:
  HTML:</p>
  
  <pre><code>&lt;nav class="home-header-content__nav--menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/terms"&gt;Terms&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/help"&gt;Help&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav class="home-header-content__nav--mobile-menu"&gt;
      &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
      &lt;i class="fa fa-times"&gt;&lt;/i&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/terms"&gt;Terms&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/help"&gt;Help&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS (only the relevant stuff):</p>
  
  <pre><code>.home-header-content__nav--menu {
     @media (max-width: $site-screen__iphone5s--landscape + 1px) {
       display: none;
     }
   }
  .home-header-content__nav--mobile-menu {
    display: none;
    text-align: right;
    position: relative;
    .fa {
       font-size: 28px;
       &amp;:hover {
          color: $site-color__secondary;
          @include transition(0.2s ease-in);
          cursor: pointer;
       }
    }
    .fa-times {
       display: none;
    }
    ul {
      text-align: right;
      font-weight: 700;
      position: absolute;
      top: 40px;
      right: 0px;
      background-color: $site-color__secondary;
      border-radius: 5px;
      padding: 10px 10px 10px 20px;
      font-size: 18px;
    }
    a {
      color: $site-color__white;
      &amp;:hover {
          color: $site-color__secondary--darker;
  
      }
    }
     @media (max-width: $site-screen__iphone5s--landscape) {
       display: inline-block;
    }
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(function responsiveHomeMenu(){
  // Store content nodes in DOM
  var $menuIcon = $('.home-header-content__nav--mobile-menu .fa');
  var $menuList = $('.home-header-content__nav--mobile-menu ul');
  
  // Hide menu links by default
  $menuList.hide();
  
  // Toggle menu with icon
  $menuIcon.on("click", function(e){
      $menuIcon.toggle();
      $menuList.slideToggle(300);
      $(document).off("click",function(){
          $menuList.toggle();
      })
  });
  });
  </code></pre>