title: Bourbon Refill Navigation Menu slide up on click
body: <p>I am using the Bourbon Refill navigation menu, and want to modify it so when a link is clicked on in small mode the menu slides back up. At the moment the menu drops down, but when a menu item is clicked the menu stays dropped down. As I am using scroll-on-page with a fixed top menu this means a lot of the content is hidden behind the menu.</p>
  
  <p>Here is the code on Codepen:</p>
  
  <p><a href="http://codepen.io/mikehdesign/pen/LVjbPv/">http://codepen.io/mikehdesign/pen/LVjbPv/</a></p>
  
  <p>My existing code is below:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header class="navigation" role="banner"&gt;
  &lt;div class="navigation-wrapper"&gt;
  &lt;a href="javascript:void(0)" class="logo"&gt;
  &lt;img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image"&gt;
  &lt;/a&gt;
  &lt;a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu"&gt;Menu&lt;/a&gt;
  &lt;nav role="navigation"&gt;
    &lt;ul id="js-navigation-menu" class="navigation-menu show"&gt;
      &lt;li class="nav-link"&gt;&lt;a href="javascript:void(0)"&gt;About Us&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav-link"&gt;&lt;a href="javascript:void(0)"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav-link"&gt;&lt;a href="javascript:void(0)"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
      &lt;li class="nav-link"&gt;&lt;a href="javascript:void(0)"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>SCSS</p>
  
  <pre><code>.navigation {
  $large-screen: em(860) !default;
  $large-screen: $large-screen;
  
  // Mobile view
  .navigation-menu-button {
  display: block;
  float: right;
  margin: 0;
  padding-top: 0.5em;
  
  @include media ($large-screen) {
    display: none;
  }
  }
  
  // Nav menu
  .navigation-wrapper {
  @include clearfix;
  position: relative;
  }
  
  .logo {
  float: left;
  
  img {
    max-height: 2em;
    padding-right: 1em;
  }
  }
  
  nav {
  float: none;
  
  @include media ($large-screen) {
    float: left;
    line-height: 1.5em;
    padding-top: 0.3em;
  }
  }
  
  ul.navigation-menu {
  clear: both;
  display: none;
  margin: 0 auto;
  overflow: visible;
  padding: 0;
  width: 100%;
  
  @include media ($large-screen) {
    display: block;
    margin: 0;
    padding: 0;
  }
  
  &amp;.show {
    display: block;
  }
  }
  
  // Nav items
  ul li.nav-link {
  display: block;
  text-align: right;
  width: 100%;
  
  @include media ($large-screen) {
    background: transparent;
    display: inline;
    text-decoration: none;
    width: auto;
  }
  }
  
  li.nav-link a {
  display: inline-block;
  
  @include media ($large-screen) {
    padding-right: 1em;
  }
  }
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
  var menuToggle = $('#js-mobile-menu').unbind();
  $('#js-navigation-menu').removeClass("show");
  
  menuToggle.on('click', function(e) {
  e.preventDefault();
  $('#js-navigation-menu').slideToggle(function(){
  if($('#js-navigation-menu').is(':hidden')) {
  $('#js-navigation-menu').removeAttr('style');
    }
  });
  });
  });
  </code></pre>
  
  <p>Help greatly appreciated</p>
  
  <p>Mike</p>