A sample hamburger menu for mobile that animates into an "X" for when active.

Hamburger Menu.js

module.exports = function() {

  var $menu_trigger = $header.find('.menu-trigger');

  // Trigger mobile navigation
  $menu_trigger.on('click touch', function(e) {
    $('body').toggleClass('nav-open');
    e.preventDefault();
  });

};

Hamburger Menu.scss

// Markup code for button.
<button type="button" class="menu-trigger"><span>Menu</span></button>

// SCSS 
.menu-trigger {
  @extend %naked-button;
  position: absolute;
  top: rem(16px);
  right: rem(20px);
  width: rem(35px);
  height: rem(35px);
  cursor: pointer;
  @include mq(large) {
    display: none;
  }
  span {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: rem(4px);
    margin-top: rem(-2px);
    background-color: setcolor(blue);
    font-size: 0;
    user-select: none;
    transition: background-color 0.3s;
    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background: setcolor(blue);
      transition: transform 0.3s;
    }
    &:before {
      transform: translateY(-175%);
    }
    &:after {
      transform: translateY(175%);
    }
    // Set state for when navigation is active. 
    .nav-open & {
      background-color: transparent;
      &:before,
      &:after {
        background: setcolor(orange);
      }
      &:before {
        transform: translateY(0) rotate(45deg);
      }
      &:after {
        transform: translateY(0) rotate(-45deg);
      }
    }
  }
}