diff --git a/css/base.css b/css/base.css
index dd3fc73f..73dccc9c 100644
--- a/css/base.css
+++ b/css/base.css
@@ -100,6 +100,10 @@ body {
   height: 100vh;
 }
 
+.is-menu-open body {
+  overflow: hidden;
+}
+
 .is-header-alignment-vertical-top body {
   justify-content: flex-start;
 }
diff --git a/css/header.css b/css/header.css
index d162d232..a7f246ce 100644
--- a/css/header.css
+++ b/css/header.css
@@ -24,7 +24,7 @@
 }
 
 .is-header-shade-style-scroll .header .header-shade {
-  transition: background-color var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--animation-speed-slow) ease-in-out;
   animation: none;
 }
 
diff --git a/css/menu.css b/css/menu.css
index b9e7982a..4af287c7 100644
--- a/css/menu.css
+++ b/css/menu.css
@@ -1,15 +1,14 @@
 .menu {
-  background-color: rgb(var(--gray-01));
-  border-radius: var(--radius);
+  padding: 1em;
   position: fixed;
-  top: 1em;
-  right: 1em;
-  width: calc(100vw - 2em);
-  max-height: calc(80vh - 2em);
-  overflow-y: auto;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 80vh;
   transform: translateY(calc(-100% - 2em));
   transition: transform var(--animation-speed-fast) ease-in-out;
   z-index: var(--z-index-menu);
+  pointer-events: none;
 }
 
 .menu:focus {
@@ -21,18 +20,24 @@
 }
 
 .menu-area {
-  display: flex;
-  flex-direction: column;
+  background-color: rgb(var(--gray-01));
+  border-radius: var(--radius);
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  pointer-events: all;
 }
 
 .menu-nav {
   display: flex;
   flex-direction: column-reverse;
+  flex-direction: row;
 }
 
 .menu-nav-area {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .menu-nav-area-grow {
@@ -44,7 +49,7 @@
 }
 
 .menu-content {
-  padding: 2em;
+  padding: 2em 2em 20vh 2em;
 }
 
 .menu-content-area {
@@ -79,6 +84,7 @@
   padding-bottom: 1em;
   border-radius: 0;
   flex-grow: 1;
+  flex-basis: 50%;
 }
 
 .menu-nav-button:first-child {
@@ -94,27 +100,29 @@
 
 @media (min-width: 550px) {
   .menu {
+    width: 80vw;
+    height: 100%;
     overflow-y: inherit;
     max-height: inherit;
   }
 
+  .menu-area {
+    overflow-y: inherit;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 100fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    justify-items: stretch;
+    align-items: stretch;
+  }
+
   .menu-content {
-    padding: 2em;
-    max-height: 70vh;
-    overflow-y: scroll;
-  }
-
-  .menu-nav {
-    flex-direction: row;
-  }
-
-  .menu-nav-area {
-    flex-direction: row;
+    overflow-y: auto;
   }
 
   .menu-content-area {
     grid-template-columns: repeat(2, 1fr);
-    margin-bottom: 10vh;
   }
 
   .menu-nav-button {
@@ -124,15 +132,12 @@
 
 @media (min-width: 900px) {
   .menu {
-    width: calc(60vw - 2em);
-    max-height: calc(100vh - 2em);
-    max-width: 40em;
+    width: 60vw;
   }
 }
 
 @media (min-width: 1100px) {
   .menu {
-    width: calc(50vw - 2em);
-    max-width: 50em;
+    width: 50vw;
   }
 }
diff --git a/index.html b/index.html
index 0e4b25f3..00060d3b 100644
--- a/index.html
+++ b/index.html
@@ -98,10 +98,10 @@
 
       <div class="menu-nav">
         <div class="menu-nav-area menu-nav-area-grow mb-0 list-unstyled">
-          <button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
+          <button class="menu-nav-button button button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
+          <button class="menu-nav-button button button-large" data-target=".menu-content-area-background" tabindex="1">Background</button>
         </div>
         <div class="menu-nav-area">
           <button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
diff --git a/js/update.js b/js/update.js
index 1a67cfe9..49a190c4 100644
--- a/js/update.js
+++ b/js/update.js
@@ -187,6 +187,10 @@ var update = (function() {
       console.log("\trunning update", 2.90);
       data = _update_290(data);
     };
+    if (data.version < 2.91) {
+      console.log("\trunning update", 2.91);
+      data.version = 2.91;
+    };
     // if (data.version < 3.00) {
     //   console.log("\t# running update", 3.00);
     //   data = _update_300(data);
diff --git a/js/version.js b/js/version.js
index b24134b2..21886314 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.9.0";
+  var current = "2.9.1";
 
   var get = function() {
     var number = current.split(".");