Fix #581

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49096999ee24273705d9cbd30bbda816f4058073..8af405f5e4b6863d790005fef1511636e65b5478 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Fix #389 `pre` `margin-bottom`
 * Fix #484 icon alignment
 * Fix #506 bold nav menu
+* Fix #581 nav container
 
 ## 0.4.0
 

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 0dd1da89b1438efaff5c3fa9f038fe2432e00641..1b0eb6d5a131b3fe7d7957c4fffdcb03c827b171 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4260,8 +4260,6 @@ a.nav-item.is-tab.is-active {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  overflow: hidden;
-  overflow-x: auto;
   white-space: nowrap;
 }
 
@@ -4309,12 +4307,6 @@ a.nav-item.is-tab.is-active {
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 999px) {
-  .nav-menu {
-    padding-right: 1.5rem;
-  }
-}
-
 .nav {
   -webkit-box-align: stretch;
       -ms-flex-align: stretch;
@@ -4337,18 +4329,13 @@ a.nav-item.is-tab.is-active {
   display: -ms-flexbox;
   display: flex;
   min-height: 3.25rem;
+  width: 100%;
 }
 
 .nav.has-shadow {
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
-@media screen and (max-width: 768px) {
-  .nav > .container {
-    width: 100%;
-  }
-}
-
 .pagination {
   font-size: 1rem;
 }

diff --git a/sass/components/nav.sass b/sass/components/nav.sass
index aaf8bb071846b0551e473336bb421d37865e58bf..f77cd886ccee88b099ace01a91666bf085350972 100644 (file)
--- a/sass/components/nav.sass
+++ b/sass/components/nav.sass
@@ -72,8 +72,6 @@ a.nav-item
 
 .nav-left
   justify-content: flex-start
-  overflow: hidden
-  overflow-x: auto
   white-space: nowrap
 
 .nav-right
@@ -104,8 +102,6 @@ a.nav-item
         padding: 0.75rem
       &.is-active
         display: block
-  +tablet-only
-    padding-right: 1.5rem
 
 // Main container
 
@@ -121,10 +117,7 @@ a.nav-item
     align-items: stretch
     display: flex
     min-height: $nav-height
+    width: 100%
   // Modifiers
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
-  // Responsiveness
-  +mobile
-    & > .container
-      width: 100%