diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 8698a778..0cb34c41 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4142,7 +4142,7 @@ input[type="submit"].button {
           justify-content: center;
   overflow: hidden;
   position: fixed;
-  z-index: 1986;
+  z-index: 20;
 }
 
 .modal.is-active {
@@ -4317,19 +4317,28 @@ a.nav-item.is-tab.is-active {
 
 .nav-left,
 .nav-right {
+  -webkit-overflow-scrolling: touch;
   -webkit-box-align: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
   -ms-flex-negative: 0;
       flex-shrink: 0;
+  max-width: 100%;
+  overflow: auto;
+}
+
+@media screen and (min-width: 1192px) {
+  .nav-left,
+  .nav-right {
+    -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+  }
 }
 
 .nav-left {
@@ -4391,10 +4400,10 @@ a.nav-item.is-tab.is-active {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  min-height: 3.25rem;
+  height: 3.25rem;
   position: relative;
   text-align: center;
-  z-index: 2;
+  z-index: 10;
 }
 
 .nav > .container {
@@ -4799,6 +4808,7 @@ label.panel-block:hover {
 }
 
 .tabs {
+  -webkit-overflow-scrolling: touch;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
index 2b2abd48..8d796a84 100644
--- a/docs/documentation/components/nav.html
+++ b/docs/documentation/components/nav.html
@@ -79,20 +79,26 @@ doc-subtab: nav
       Blog
     </a>
 
-    <span class="nav-item">
-      <a class="button" >
-        <span class="icon">
-          <i class="fa fa-twitter"></i>
-        </span>
-        <span>Tweet</span>
-      </a>
-      <a class="button is-primary">
-        <span class="icon">
-          <i class="fa fa-download"></i>
-        </span>
-        <span>Download</span>
-      </a>
-    </span>
+    <div class="nav-item">
+      <div class="field is-grouped">
+        <p class="control">
+          <a class="button" >
+            <span class="icon">
+              <i class="fa fa-twitter"></i>
+            </span>
+            <span>Tweet</span>
+          </a>
+        </p>
+        <p class="control">
+          <a class="button is-primary">
+            <span class="icon">
+              <i class="fa fa-download"></i>
+            </span>
+            <span>Download</span>
+          </a>
+        </p>
+      </div>
+    </div>
   </div>
 </nav>
 {% endcapture %}
diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index e15be57f..d3fc0151 100644
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -75,7 +75,7 @@
   justify-content: center
   overflow: hidden
   position: fixed
-  z-index: 1986
+  z-index: 20
   // Modifiers
   &.is-active
     display: flex
diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index 52992fdf..b5314f0d 100644
--- a/sass/components/nav.sass
+++ b/sass/components/nav.sass
@@ -62,11 +62,15 @@ a.nav-item
 
 .nav-left,
 .nav-right
+  +overflow-touch
   align-items: stretch
   display: flex
-  flex-basis: 0
   flex-grow: 1
   flex-shrink: 0
+  max-width: 100%
+  overflow: auto
+  +widescreen
+    flex-basis: 0
 
 .nav-left
   justify-content: flex-start
@@ -107,10 +111,10 @@ a.nav-item
   align-items: stretch
   background-color: $white
   display: flex
-  min-height: $nav-height
+  height: $nav-height
   position: relative
   text-align: center
-  z-index: 2
+  z-index: 10
   & > .container
     align-items: stretch
     display: flex
diff --git a/sass/components/tabs.sass b/sass/components/tabs.sass
index 506859a0..605176c5 100644
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -1,5 +1,6 @@
 .tabs
   +block
+  +overflow-touch
   +unselectable
   align-items: stretch
   display: flex