Opacity stuck to $hamburger-hover-opacity after tapping (mobile)

[marinoguerieri]

It seems that opacity never goes back to original value after tapping on mobile device, or at least my mobile devices. :) Hamburger stays as opaque as it were during hover. On desktop everything is fine.
Bug happens even on your demo, so it's not due to my implementation.

[marinoguerieri]

Ok it seems that the cause is using :hover, which is fine on desktop but on mobile it has strange behaviour, i.e. it seems that button stays in hover mode after clicking, and that it's something that's known.
See this and similar issues:
https://stackoverflow.com/questions/29016648/submit-button-stays-hover-color-after-clicked

I've commented out this part of code, thus disabling hover functionality/opacity change, after which everything works:

  /*
  &:hover {
    @if $hamburger-hover-use-filter == true {
      filter: $hamburger-hover-filter;
    }
    @else {
      opacity: $hamburger-hover-opacity;
    }
  }

  &.is-active {
    &:hover {
      @if $hamburger-hover-use-filter == true {
        filter: $hamburger-active-hover-filter;
      }
      @else {
        opacity: $hamburger-active-hover-opacity;
      }
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
      background-color: $hamburger-active-layer-color;
    }
  }*/

I didn't have the time to actually make it work but I suppose the solution is to somehow NOT apply hover on mobile devices, maybe using media queries.

[arturleao]

I've added this and seems to fix this issue.

.hamburger.collapsed { opacity: 1; }