How To: Using Hamburgers Package in Sage

sage
,
1

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 https://jonsuh.com/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.

12 Likes
2

Thanks a lot for sharing! Just added to https://roots.io/sage/docs/theme-development-and-building/#additional-examples

2 Likes
4

Don’t forget you will need something to open your navbar, I used this
$("#primary_nav").toggleClass(“is-active”); in the same click event and a bit of css for opacity from 0 to 1.

CSS
#primary_nav {
opacity: 0;
pointer-events: none;
transition: opacity 300ms;
}
#primary_nav.is-active {
opacity: 1;
pointer-events: auto;
}

2 Likes
5

Hey
When I added the Hamburger to main.scss file I discovered a little problem with it. If it is added to any position other than the last line. Everything that is imported after it does not fall into production. On the developer works without a problem but the production is doing the problem. Added as autoload remove all styles

6

@Piotr_Mlynarz - I haven’t tried putting it in the autoload folder, but importing it as shown in the instructions at the top of the thread works for me even if it’s not at the end of the file. Can you share the full code of your main.scss file (the version that breaks it)?

Here’s an example that works from one of my past projects.

main.scss:

@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
@import "~normalize.css";
@import "~hamburgers/_sass/hamburgers/hamburgers";

/** Import theme styles */
@import "common/global";
@import "common/grid";
@import "common/fonts";
@import "common/typography";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/page_header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/front_page";
@import "layouts/index";
@import "layouts/tinymce";
@import "common/utilities";
7

It`s working one. If I set it like you (without normalizer) it will brake on build:production. Its fresh sage and hamburger

@import “common/variables”;

/** Import everything from autoload */
@import "./autoload/**/*";

/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
// @import "~some-node-module";

/** Import theme styles */
@import "common/mixins";
@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/wp-classes";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/section";
@import "layouts/flying_banner";
@import "sections/discoverT";
@import "layouts/advantages";
@import "layouts/dualFullPageSlider";
@import "layouts/newfeed";
@import "layouts/team";
@import "layouts/posts";
@import "layouts/tinymce";
@import "~hamburgers/_sass/hamburgers/hamburgers";
8

I wonder if you’re running into this Bootstrap problem which affects build:production

2 Likes
9

I must say that sounds familiar

10

@Piotr_Mlynarz - @MWDelaney’s suggestion is what I had in mind, as well. If you temporarily disable Bootstrap or use @QWp6t’s workaround, does your CSS compile correctly with Hamburgers included?

2 Likes
11

Tomorrow I’ll check and tell you because I left the office.

12

I can confirm that the above mentioned workaround works.

2 Likes
13

Might want to change the snippet in the guide to initiate the hamburger to:

  $('.hamburger').on( 'click', function() {
    $(this).toggleClass('is-active');
  });

so the deprecation warnings go away.