Merge pull request #1049 from leimao/fix_nav_bar_overflow

Fix the NavBar Overflow Issue when NavBar Items are Too Many

Author: ppoffice

include/style/navbar.styl

@@ -9,6 +9,9 @@ $navbar-item-margin-h ?= 0
 .navbar-main
     box-shadow: $shadow
 
+    .navbar-container
+        overflow-x: auto
+
     .navbar-menu, .navbar-start, .navbar-end
         align-items: stretch
         display: flex
@@ -50,4 +53,8 @@ $navbar-item-margin-h ?= 0
 
 .navbar-logo
     img
-        max-height: $logo-height
+        max-height: $logo-height
+
+@media screen and (min-width: $desktop)
+    .navbar > .container .navbar-menu, .container > .navbar .navbar-menu
+        margin-right: 0rem

layout/common/navbar.jsx

@@ -40,7 +40,7 @@ class Navbar extends Component {
         }
 
         return <nav class="navbar navbar-main">
-            <div class="container">
+            <div class="container navbar-container">
                 <div class="navbar-brand justify-content-center">
                     <a class="navbar-item navbar-logo" href={siteUrl}>
                         {navbarLogo}