How to override default settings when using "Hamburgers" in multiple place?

[MoradHamdy]

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?

[7iomka]

Any solutions? Same question!

[jonsuh]

Will consider this for a v2

[AllanPooley]

This is challenging! As SASS variables are converted into their values on the server, whilst media queries trigger on the client (after the fact).

The best solution I can think of (although I'm sure there is a better one out there) is making separate SASS variables for your mobile values and using them in your breakpoint. For example:

$mobile-hamburger-padding-x     : 20px !default;
$mobile-hamburger-padding-y     : 20px !default;
$mobile-hamburger-layer-width   : 30px !default;
$mobile-hamburger-layer-height  : 2px !default;
$mobile-hamburger-layer-spacing : 6px !default;

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: $hamburger-layer-height / -2;

  @include media-down(mobile) {
    margin-top: $mobile-hamburger-layer-height / -2;
  }

  &,
  &::before,
  &::after {
    width: $hamburger-layer-width;
    height: $hamburger-layer-height;
    @include media-down(mobile) {
      width: $mobile-hamburger-layer-width;
      height: $mobile-hamburger-layer-height;
    }
    background-color: $hamburger-layer-color;
    border-radius: $hamburger-layer-border-radius;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
  }

// ... more code

}

/*=============================================>>>>>
= Breakpoints =
===============================================>>>>>*/
$breakpoints: (
  large: 1600px,
  desktop: 1340px,
  tablet: 1080px,
  small-tablet: 960px,
  mobile: 800px,
  small-mobile: 400px
);

/*=============================================>>>>>
= Media Down =
===============================================>>>>>*/

// @include media-down(mobile) {}
@mixin media-down($breakpoint) {

  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {

    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    // Write the media query.
    @media (max-width: ($breakpoint-value - 1)) {
      @content;
    }

  // If the breakpoint doesn't exist in the map.
  } @else {

    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

@staeff this might help you with your issue