• Sage

How to Use Hamburgers in Sage

Implementing animated hamburger menu icons is a nice touch, but something I’ve always found to be a pain — particularly adjusting the sizing/positioning/transformation of the bars in the "open" state.

I just found Hamburgers and gave it a test drive. Nice library and pretty easy to get set up.

Install

yarn add hamburgers

Import in main.scss

@import "~hamburgers/_sass/hamburgers/hamburgers";

Add the markup

Probably in your header.blade.php partial:

<button class="hamburger hamburger--vortex" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

In this case, I’m using the ‘vortex’ type.

Customize as desired in _variables.scss

Here’s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.

/** Hamburger icon */
$hamburger-padding-x: 0;
$hamburger-padding-y: 0;
$hamburger-layer-width: 20px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 4px;
$hamburger-layer-color: $brand-primary;
$hamburger-types: (vortex);

Again, I’m using the ‘vortex’ type here.

Add JS to make it functional to common.js

export default {
  init() {
    // JavaScript to be fired on all pages
    $('.hamburger').click(function() {
      $(this).toggleClass('is-active');
    });
  },
  finalize() {
     // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

You would likely also be toggling the state of your menu in the same click handler.

That should be it.

Join the discussion on Roots Discourse

Join over 5,500 subscribers on our newsletter to get the latest Roots updates, along with occasional tips on building better WordPress sites.

Looking for WordPress plugin recommendations, the newest modern WordPress projects, and general web development tips and articles?

“Easily the best WordPress email I get.” Colin OBrien

Ready to checkout?