Custom responsive menu for _s

menu-toggle.js

jQuery(document).ready(function($) {

/* menu toggle */
  $('.menu-toggle').click(function() {
    $('#site-navigation, .menu-toggle').toggleClass('toggled');
  })
});

responsive-menu.scss

/* primary nav */
.main-navigation {
  position: relative;
  width: 100%;
  padding: (5/14)*1em;
  text-align: center;

  .menu {
    display: block;
    position: relative;
    max-height: 0;
    overflow: hidden;
  }
  &.toggled .menu {
    max-height: 30em;
    @include transition(all .2s ease);
  }
  a {
    display: block;
    padding: (12/13)*1em 5px;
  }
}
.menu-toggle {
  display: block;
  cursor: pointer;
}

/* small menu goes away */
@media screen and (min-width: $bp-nav-big) {
  .menu-toggle {
    display: none;
  }
  .main-navigation {
    .menu {
      max-height: 30em;
    }
    li {
      display: inline-block;
      margin: 0 0 0 (10/14)*1em;
    }
    a {
      position: relative;
    }
  }
}