Hey, i'm using the spin hamburger button, but I get a weird blue transparent overlay when i'm clicking the button. How do I get rid of it using just CSS?
It looks like this (hamburger being long-clicked):
https://i.gyazo.com/430dc0065c62d9c52f24fb1a1ba99adf.png

Was this a mistake? Message says @v1.0.0 (which has been removed) but it seems like the whole package is deprecated.

yarn get hamburgers is not a valid yarn command. yarn add hamburgers is what you want I think.

Hi there! This isn't a issue but I didn't know where to ask!
Are you accepting donations or supports? Because may you get some extra support for hamburgers, but there is no donate button o something like that.
I don't trying to spam you, but I want to invite you to beerpay.io, a simple platform to monetize open source projects, like hamburgers.
I know that the open source is free, but it's okay if someone want to contribute in other way.

Thanks for this work man!

I am trying to use your hamburgers instead of Bootstrap's default one. I changed this part o fthe code

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

to be

<button class="hamburger hamburger--slider" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="hamburger-box">
        <span class="hamburger-inner"></span>
    </span>
</button>

The hamburger icon is present, however, the animation is not working for some reason that I don't understand. Do you have any idea why isn't it working?

Assume i'm using "Harmurgers" for mobile menu icon, and for another case as a closing X icon for a popup box.

As mentioned in the customization section of "Hamburgers" here, i can make overriding default settings such as setting the following sass variables:

$hamburger-layer-width                     : 20px;
$hamburger-layer-height                    : 1px;
$hamburger-layer-color                     : #ccc;

But in case i use Hamburgers in 2 different places as i mentioned, these sass variables will override settings in all places!

So how to deal with that?

Hi there,

I like how this stuff made hamburger icons easy to handle! Thank you for your effort.

It would be great if there are classes to be used to control size, for example like adding class large, medium or small to give different sizes look. Or some another method to control hamburger icons size.

Instead of using fixed pixel units, it would add a lot more flexibility using em.
I already did it on a project and could create a PR.

Please give me some help to fix that

Trying to see what is the easiest, most future-compatible way to control colors in a non-SCSS setup.

Is this the way to go?

.hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before {
  background-color: #666;
}

If so, can I suggest maybe adding another class to these elements that will allow something like:

.hamburger-icon { background-color: #666; }

How to close hamburger on click?

In my case is needed because it is used in one page site.

Hi, I think you should mention on your documentation that one should add the hamburgers.js file or add a click mouse event that toggles an is-active class on the button?

It would be great to add a setting to control the active state of the icon. So we can change the colour of the cross etc.
Lovely work though. Thanks.

Hey there,

I'm struggling to remove the annoying line next to the hamburger button.. It shows in Chrome and Safari as well and I have no idea why.

Here is what I'm talking about:

Also, when I'm resizing the layers and the spacing for example. They get messed up, the spacing between them is going to be different and the height of (usually just the top) the layer gets smaller than the others.

Any idea on how, to remove them?

Go from this

to this:

Can this be done with the $hamburger-hover-filter parameter somehow, or is javascript needed?

Any plans for a .less version?

I'm trying to make the hamburger change color on hover, but it's obviously coming into conflict with some CSS, and as a result the patty and buns are changing color at a different rate. Is there any good workaround to this?

Hi.

I love this plugin but I'm trying to edit the css such that when the hamburger is clicked, the positioning doesn't change such that the X is underneath the toggled menubar. Is this possible? If so, what do I need to change in the css? I'm using 3DX transition. Any help is appreciated.

Also, there is an outline on the hamburger after I click it. Is there any way to remove that outline?

Hello :) Good work here!

I'd love for you to consider users that may be using a keyboard or assistive technology. They can't send focus to the burger because <divs> are not focusable. This is because a <div> is used where perhaps <a> or <button> could be used. Doing this along with visually hiding some text content inside the anchor provides assistive technology something to work with.

You can test this by trying to access your burger by unplugging your mouse and try to tab to it. Here's a code snippet that could be considered:

<a class="hamburger" href="#some-navigation">
  <span class="visually-hidden">Main Navigation</span>
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</a>

href points to ID placed on element it controls. The author then could add aria to further enhance the accessibility. e.g. aria-controls aria-expanded etc.

If you MUST use a <div> adding tabindex="0" would make them focusable but is not ideal. Also role="button" should be added as well. :(

Hello, first of all, thank you for this wonderful library.
As app grows, its easier to make hamburgers a react component.
Something like this

<Hamburger
  active={this.state.active}
  type="slider"
  onClick={() => this.setState({ active: !this.state.active })}
/>

And add react-emotion support, there won't be any css conflict and additional sass logic.
Thank you.

For the sass structure, do you think it might be helpful to rewrite the library using placeholders instead of classes? Ex:

%hamburger-slider-r {
  .hamburger-inner { }
}

That could help in a situation where somebody is getting the whole package but only want to use one of the transitions, and don't want to inflate the code with the ones they don't use.

The hamburgers.sass cannot be imported in my company's project because of the hamburger.sass path has been assigned to the SASS_PATH environment variable, and somehow this environment variable is not being included when the asset compile. I end up pushing the hamburgers.sass's path to the asset_paths array in my project's config file. As in the Rails gem guide, I suggest to put it under one of the directories, app/assets, lib/assets or vendor/assets. http://guides.rubyonrails.org/asset_pipeline.html#adding-assets-to-your-gems

On demo we see just two types of "hamburguers", arrow and cross...
So, we can add more? Ideas?

I tried to toggle the hamburger with jquery but it doesn't work. Any ideas?

Hi! It would be great if you changed the active class to 'active' instead of is-active, since the dashed version can sometimes lead to some problems.

I know we can just mod the scss files, yes, no prob, but then updates would be broken (and again, yes, it would be simple to fix it up as well, but it would be simpler to keep things simple :)).

Thanks for your great code, Regards

There is something existing that allow to change default nav icon to plus icon?

Hi, how use via npm + PostCSS?

Hello there!
How can I adequately change the size of icon?

I cannot figure out why only in IE 10 (I've tested with Windows 7)
In this website http://www.nexta-tech.com/en/ it's not possible to click on the hamburger menù.
Also the hover do not show the correct cursor pointer.
This happens only in homepage, for other pages like http://www.nexta-tech.com/en/company
works correctly.

Do you have an idea what I'm doing wrong?

Thanks in advance!

Not sure why it is behaving that way

No code changed in the sass files and this is what i have on my page

<button class="hamburger hamburger--emphatic" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
  <br />
  <span class="hamburger-label">Menu</span>
</button>

Hey,

This is not an issue, more a recommendation or a note :)

I've turned your sass code into a single mixin, which is easy to include and customize:

@mixin burger($options: ()) {

  // Default settings
  // To customize just pass in the arguments in a map
  // Example:
  // @include burger((padding: 30px))
  $config: map-merge((
    padding: 15px,
    width: 40px,
    height: 4px,
    spacing: 6px,
    color: black,
    border-radius: 4px,
    hover-opacity: 0.7,
    background-color: black,
    hover-transition-duration: 0.15s,
    hover-transition-timing-function:  linear,
  ), $options);

  // Get the map properties and asign them to variables for improved readabilty
  $padding: map-get($config, padding);
  $width: map-get($config, width);
  $height: map-get($config, height);
  $spacing: map-get($config, spacing);
  $color: map-get($config, color);
  $border-radius: map-get($config, border-radius);
  $hover-opacity: map-get($config, hover-opacity);
  $background-color: map-get($config, background-color);
  $hover-transition-duration: map-get($config, hover-transition-duration);
  $hover-transition-timing-function: map-get($config, hover-transition-timing-function);

  // Styles
  // --------------------------------------------------------------------------

  padding: $padding;
  background-color: $background-color;

  &:hover {
    opacity: $hover-opacity;
  }

  .hamburger__container {
    width: $width;
    height: $height * 3 + $spacing * 2;
  }

  .hamburger__inner {
    transition: opacity $hover-transition-duration $hover-transition-timing-function;
    margin-top: $height/ -2;
    &,
    &::before,
    &::after {
      width: $width;
      height: $height;
      background-color: $background-color;
      border-radius: $border-radius;
    }

    &::before {
      top: ($spacing + $height) * -1;
    }

    &::after {
      bottom: ($spacing + $height) * -1;
    }
  }

}

.hamburger {
  display: inline-block;
  cursor: pointer;
}

// Undo button styles
button.hamburger {
  appearance: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger__container {
  display: inline-block;
  position: relative;
}

.hamburger__inner {
  display: block;
  top: 50%;

  &,
  &::before,
  &::after {
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
  }

  &::before,
  &::after {
    content: '';
    display: block;
  }
}

This way you include the burger like this:

.my-class {
  @include burger(( height: 30px ));
}

Multiple animations then could be included with an if/else block.

My hamburger settings:

$hamburger-padding-x: 3px;
$hamburger-padding-y: 0;
$hamburger-layer-width: 24px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 5px;

With Normalize.css, a style with

font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;

will be applied to the <button> element causing the button to have a height of 24px whereas my hamburger will only have 16px height with the settings above.

As per the screenshot, you can see the hamburger does not align with the button's height vertically.

First thing I tried

Adding vertical-align: middle to .hamburger-box.

But it still doesn't seem vertically centered.

Second (which hopefully is a better solution for hamburgers)

Giving .hamburger a width and height property, and position centering .hamburger-box in relative to .hamburger as such.

.hamburger {
   width: 32px; // can be overwritten by button css
   height: 32px; // can be overwritten by button css
   position: relative;
}

.hamburger-box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Giving us this.

I can create a PR for this if you'd like @jonsuh

Cheers

It could be good if pure css support is available.
When using purecss you do this:
Html:
checkbox
label
CSS:

input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + label {
 //alternate css rules for label (the same as .is_active)
}

PureCSS is a common practice in well developed websites.

...It would be lovely have this available via bower :)

Hello, nice burgers 👍 🍔 !

Usually each project has just one burguer.
And of course we can go into the files and comment the @import, but this means touching files in node_modules ( that problably will rely on a problem if we try a package version update ) 😢 .

Wouldn't be a better approach just have @mixins for each burguer ( and have them listed in the DOC) so i can @include just the one that i want ?

Keeping your files clean 😃.

So I get this result?

Thanks

Hi,
I've spotted an issue while using this library with Firefox. Once the transition is complete, the icon (after some milliseconds) lose its thickness. Am I the only one that is experiencing this problem?

Hey bro, i love your design.

.hamburger--spin-r.is-active .hamburger-inner::after for "spin reverse" needs to be rotated 90deg instead of -90deg like the normal spin (line 36 in spin-r.scss)

There is an error when importing hamburger.scss into Sass projects.

There error line begins with:

Error: Invalid US-ASCII character \"\xE2\"

See PR #17. Thanks.

I don't seem to find a way of controling the time the transition takes to complete/ the speed of the burger.
Is this really missing?

@jonsuh: It would be awesome if Hamburgers supported installation via Bower. If you're open to that idea, I can send a pull request your direction with the necessary updates.

I am animating a burger menu changing the margin and width of two divs, and in the meantime, a burger icon it is animated switching the class is-active.

The result, as you can see, is a jumpy effect in the content of the burger menu (green area):
http://www.codeply.com/go/7xjGnw5yEc

Executing the burger button: you can see that, for some miliseconds, the green area dissapears.
Executing the toggle button: you can see that there are no jumps.

I only reproduce it in Google Chrome.

What is it happening? How can I fix this strange behaviour?

Hi it's very useful on desktop. However i have a little issue. When i'm using a script on an ipad. I have to double click on the icon to see result. Regards

Title says it all.

Example: Mobile version of https://www.apple.com

for .hamburger-box must add property vertical-align: top;

without vertical-align: top

with vertical-align: top

So I have the css and it linked in I have put the code in the and absolutely nothing happens? I click and get nothing.

With the following classes ignored:

'.is-active','*.is-active', '.hamburger--collapse','.hamburger-*', '.hamburger-inner', '.hamburger', '.hamburger-box',
        '.hamburger--collapse-r.is-active', '.hamburger--collapse.is-active', '.hamburger--collapse-r',
        '.hamburger--collapse.is-active', '.hamburger-inner::before', '.hamburger-inner::after',

and the following markup:

<button class="hamburger hamburger--collapse" type="button" aria-label="Menu" aria-controls="navigation">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

I'm unable to get any hamburger on my mobile display and even on the desktop I'm not able to retain the animations...