From d58e77edb58b1689200a443e8fbe3a3415d1af0e Mon Sep 17 00:00:00 2001
From: Nate Bailey <nathanaelbailey@gmail.com>
Date: Sat, 19 Oct 2019 10:53:41 -0700
Subject: [PATCH 1/2] Update _base.scss

---
 _sass/hamburgers/_base.scss | 40 +++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/_sass/hamburgers/_base.scss b/_sass/hamburgers/_base.scss
index 7263067..b93bd43 100644
--- a/_sass/hamburgers/_base.scss
+++ b/_sass/hamburgers/_base.scss
@@ -18,12 +18,20 @@
   margin: 0;
   overflow: visible;
 
+  @media (max-width: $hamburger-breakpoint-mobile) {
+    padding: $hamburger-padding-y-mobile $hamburger-padding-x-mobile;
+  }
+
   &:hover {
     @if $hamburger-hover-use-filter == true {
       filter: $hamburger-hover-filter;
     }
     @else {
       opacity: $hamburger-hover-opacity;
+
+      @media (max-width: $hamburger-breakpoint-mobile) {
+        opacity: $hamburger-hover-opacity-mobile;
+      }
     }
   }
 
@@ -34,6 +42,10 @@
       }
       @else {
         opacity: $hamburger-active-hover-opacity;
+
+        @media (max-width: $hamburger-breakpoint-mobile) {
+          opacity: $hamburger-hover-opacity-mobile;
+        }
       }
     }
 
@@ -41,6 +53,10 @@
     .hamburger-inner::before,
     .hamburger-inner::after {
       background-color: $hamburger-active-layer-color;
+
+      @media (max-width: $hamburger-breakpoint-mobile) {
+        background-color: $hamburger-active-layer-color-mobile;
+      }
     }
   }
 }
@@ -50,6 +66,11 @@
   height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
   display: inline-block;
   position: relative;
+
+  @media (max-width: $hamburger-breakpoint-mobile) {
+    width: $hamburger-layer-width-mobile;
+    height: $hamburger-layer-height-mobile * 3 + $hamburger-layer-spacing-mobile * 2;
+  }
 }
 
 .hamburger-inner {
@@ -57,6 +78,10 @@
   top: 50%;
   margin-top: $hamburger-layer-height / -2;
 
+  @media (max-width: $hamburger-breakpoint-mobile) {
+    margin-top: $hamburger-layer-height-mobile / -2;
+  }
+
   &,
   &::before,
   &::after {
@@ -68,6 +93,13 @@
     transition-property: transform;
     transition-duration: 0.15s;
     transition-timing-function: ease;
+
+    @media (max-width: $hamburger-breakpoint-mobile) {
+      width: $hamburger-layer-width-mobile;
+      height: $hamburger-layer-height-mobile;
+      background-color: $hamburger-layer-color-mobile;
+      border-radius: $hamburger-layer-border-radius-mobile;
+    }
   }
 
   &::before,
@@ -78,9 +110,17 @@
 
   &::before {
     top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+
+    @media (max-width: $hamburger-breakpoint-mobile) {
+      top: ($hamburger-layer-spacing-mobile + $hamburger-layer-height-mobile) * -1;
+    }
   }
 
   &::after {
     bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+
+    @media (max-width: $hamburger-breakpoint-mobile) {
+      bottom: ($hamburger-layer-spacing-mobile + $hamburger-layer-height-mobile) * -1;
+    }
   }
 }

From 6a099c7e0366fb99fc5e79d8a63afa46adbfe79e Mon Sep 17 00:00:00 2001
From: Nate Bailey <nathanaelbailey@gmail.com>
Date: Sat, 19 Oct 2019 10:54:34 -0700
Subject: [PATCH 2/2] Update hamburgers.scss

---
 _sass/hamburgers/hamburgers.scss | 34 ++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/_sass/hamburgers/hamburgers.scss b/_sass/hamburgers/hamburgers.scss
index 915746b..f4660a4 100644
--- a/_sass/hamburgers/hamburgers.scss
+++ b/_sass/hamburgers/hamburgers.scss
@@ -9,16 +9,30 @@
 
 // Settings
 // ==================================================
-$hamburger-padding-x           : 15px !default;
-$hamburger-padding-y           : 15px !default;
-$hamburger-layer-width         : 40px !default;
-$hamburger-layer-height        : 4px !default;
-$hamburger-layer-spacing       : 6px !default;
-$hamburger-layer-color         : #000 !default;
-$hamburger-layer-border-radius : 4px !default;
-$hamburger-hover-opacity       : 0.7 !default;
-$hamburger-active-layer-color  : $hamburger-layer-color !default;
-$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-padding-x            : 15px !default;
+$hamburger-padding-y            : 15px !default;
+$hamburger-layer-width          : 40px !default;
+$hamburger-layer-height         : 4px !default;
+$hamburger-layer-spacing        : 6px !default;
+$hamburger-layer-color          : #000 !default;
+$hamburger-layer-border-radius  : 4px !default;
+$hamburger-hover-opacity        : 0.7 !default;
+$hamburger-active-layer-color   : $hamburger-layer-color !default;
+$hamburger-active-hover-opacity : $hamburger-hover-opacity !default;
+
+// Mobile settings
+// ==================================================
+$hamburger-breakpoint-mobile           : 800px !default;
+$hamburger-padding-x-mobile            : $hamburger-padding-x !default;
+$hamburger-padding-y-mobile            : $hamburger-padding-y !default;
+$hamburger-layer-width-mobile          : $hamburger-layer-width !default;
+$hamburger-layer-height-mobile         : $hamburger-layer-height !default;
+$hamburger-layer-spacing-mobile        : $hamburger-layer-spacing !default;
+$hamburger-layer-color-mobile          : $hamburger-layer-color !default;
+$hamburger-layer-border-radius-mobile  : $hamburger-layer-border-radius !default;
+$hamburger-hover-opacity-mobile        : $hamburger-hover-opacity !default;
+$hamburger-active-layer-color-mobile   : $hamburger-active-layer-color !default;
+$hamburger-active-hover-opacity-mobile : $hamburger-active-hover-opacity !default;
 
 // To use CSS filters as the hover effect instead of opacity,
 // set $hamburger-hover-use-filter as true and