Fix an issue with the header on mobile

eddiesigner · Nov 13, 2019 · d81dafb · d81dafb
1 parent 0a3e0a0
commit d81dafb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.5.9"
+  "version": "0.6.0"
 }
diff --git a/src/js/app.js b/src/js/app.js
@@ -102,11 +102,13 @@ $(document).ready(() => {
   }
 
   $openMenu.click(() => {
+    $header.addClass('mobile-menu-opened')
     $menu.addClass('opened')
     toggleScrollVertical()
   })
 
   $closeMenu.click(() => {
+    $header.removeClass('mobile-menu-opened')
     $menu.removeClass('opened')
     toggleScrollVertical()
   })

diff --git a/src/sass/components/header/_header.scss b/src/sass/components/header/_header.scss
@@ -12,6 +12,14 @@
     padding: 20px 0;
   }
 
+  &.mobile-menu-opened {
+    height: 100%;
+
+    @include respond-to('medium') {
+      height: auto;
+    }
+  }
+
   &.headroom--pinned {
     @include bs(0 4px 8px rgba(0, 0, 0, 0.05));
     @include transform(translateY(0%));