diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index 0970f68aea..4e0cc579d3 100644
--- a/scss/foundation/components/_global.scss
+++ b/scss/foundation/components/_global.scss
@@ -110,6 +110,52 @@ $base-line-height: 150% !default;
   }
 }
 
+// @mixins
+//
+// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
+// $width - Width of hamburger icon in rem
+// $left - If false, icon will be centered horizontally || explicitly set value in rem
+// $top - If false, icon will be centered vertically || explicitly set value in rem
+// $thickness - thickness of lines in hamburger icon, set value in px
+// $gap - spacing between the lines in hamburger icon, set value in px
+// $color - icon color
+// $hover-color
+
+@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color) {
+  span:after {
+    content: '';
+    position: absolute;
+    display: block;
+    height: 0;
+    
+    @if $top {
+      top: $top;
+    }
+    @else {
+      top: ($width - rem-calc(3 * $thickness) - rem-calc(2 * $gap))/2;
+    }
+    // disable width centering if $top is not false
+    @if $left {
+      left: $left;
+    }
+    @else {
+      left: 0;
+    }
+    
+    box-shadow:
+      0 0px 0 $thickness $color,
+      0 $gap + $thickness 0 $thickness $color,
+      0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+    width: $width;
+  }
+  &:hover {
+    box-shadow:
+      0 0px 0 $thickness $hover-color,
+      0 $gap + $thickness 0 $thickness $hover-color,
+      0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
+  }
+}
+
 // We use this to do clear floats
 @mixin clearfix {
   &:before, &:after { content: " "; display: table; }