Fix an issue with the header on mobile

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.5.9"
+  "version": "0.6.0"
 }

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()
   })

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%));