Fix nav overflow

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 8698a7784e23874e0f8941e0456e1c9a86fc29d2..0cb34c41292ec4b41742c8536f8ff5b33d9214ef 100644 (file)
--- 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 2b2abd4816c22b56c4e4b40674d78482dcc00e04..8d796a8433d05b9a7d78bdb8880d5c959da943ad 100644 (file)
--- 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 e15be57f337255461c06eec302509723bfae7edc..d3fc015118ff133e7171177ba02e00161a8e682e 100644 (file)
--- 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 52992fdf506c49e95db803e8c939ea69f74e9da8..b5314f0d8865bd73e1c8d590e2e00d87ca4d2eeb 100644 (file)
--- 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 506859a0658b19a6ec8f6cad52bbd3cfb6dabe42..605176c55ae5c07cad113964432e41c93dc919e5 100644 (file)
--- a/sass/components/tabs.sass
+++ b/sass/components/tabs.sass
@@ -1,5 +1,6 @@
 .tabs
   +block
+  +overflow-touch
   +unselectable
   align-items: stretch
   display: flex