diff --git a/assets/css/screen.css b/assets/css/screen.css
index e664c71e..44f959fb 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -89,7 +89,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
 
 .gh-head-logo {
     display: block;
-    padding: 10px;
+    padding: 10px 0;
     font-weight: 600;
     font-size: 2.2rem;
     line-height: 1.2em;
@@ -126,7 +126,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
 
 .burger {
     position: relative;
-    display: inline-block;
+    display: none;
     cursor: pointer;
 }
 
@@ -144,6 +144,21 @@ production stylesheet in assets/built/screen.css using: gulp dev
     height: 100%;
 }
 
+.burger-box::before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: #fff;
+    transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
+    will-change: transform, width;
+}
+
 .burger-inner::before,
 .burger-inner::after {
     position: absolute;
@@ -156,17 +171,125 @@ production stylesheet in assets/built/screen.css using: gulp dev
     width: 100%;
     height: 1px;
     background: #fff;
-    transition: transform 250ms cubic-bezier(.2,.6,.3,1), width 250ms cubic-bezier(.2,.6,.3,1);
+    transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
     will-change: transform, width;
 }
 
 .burger-inner::before {
-    transform: translatey(-5px);
+    transform: translatey(-6px);
 }
 .burger-inner::after {
-    transform: translatey(5px);
+    transform: translatey(6px);
 }
 
+body:not(.gh-head-open) .burger:hover .burger-inner::before {
+    transform: translatey(-8px);
+}
+body:not(.gh-head-open) .burger:hover .burger-inner::after {
+    transform: translatey(8px);
+}
+
+.gh-head-open .burger-box::before {
+    width: 0;
+    transform: translatex(19px);
+    transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
+}
+
+.gh-head-open .burger-inner::before {
+    width: 26px;
+    transform: translatex(6px) rotate(135deg);
+}
+
+.gh-head-open .burger-inner::after {
+    width: 26px;
+    transform: translatex(6px) rotate(-135deg);
+}
+
+
+@media (max-width: 900px) {
+    .burger {
+        display: inline-block;
+    }
+    .gh-head {
+        height: max-content;
+        transition: all 0.4s ease-out;
+    }
+    .gh-head .gh-container {
+        height: 100%;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr auto;
+    }
+    .gh-head-actions,
+    .gh-head-menu {
+        position: absolute;
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity 0.3s ease-in;
+    }
+    .gh-head-brand {
+        grid-column-start: auto;
+        max-width: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        user-select: none;
+    }
+    .gh-head-open {
+        background: rgba(255,255,255,1);
+        transition: background 0.5s ease-out;
+        transition-delay: 0.25;
+        overflow: hidden;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    .gh-head-open .gh-head {
+        height: 100vh;
+        overflow-y: scroll;
+        transition: height 0.2s ease-in;
+    }
+
+    .gh-head-open .gh-head-actions,
+    .gh-head-open .gh-head-menu {
+        position: relative;
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .gh-head-menu {
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 0 10vh;
+        font-size: 3.6rem;
+        line-height: 1.5em;
+    }
+
+    .gh-head-menu .nav {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .gh-head-actions {
+        padding: 20px 0;
+        justify-content: center;
+        text-align: left;
+    }
+    .gh-head-actions a {
+        margin: 0 10px;
+    }
+}
+
+
+
+
+
 
 /* Footer
 /* ---------------------------------------------------------- */
diff --git a/default.hbs b/default.hbs
index 23dcbf44..fa4b7ad8 100644
--- a/default.hbs
+++ b/default.hbs
@@ -62,7 +62,7 @@
 
 </div>
 
-<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
 {{#if pagination.pages}}
 <script>
@@ -71,6 +71,15 @@
 <script src="{{asset "built/infinitescroll.js"}}"></script>
 {{/if}}
 
+<script>
+$(document).ready(function () {
+    // Mobile Menu Trigger
+    $('.burger').click(function () {
+        $('body').toggleClass('gh-head-open');
+    });
+});
+</script>
+
 
 {{{block "scripts"}}}
 {{!-- The #block helper will pull in data from the #contentFor other template files --}}