From 2976a25db160e60172d3a98477cdb9f23f114fca Mon Sep 17 00:00:00 2001
From: Lei Mao <dukeleimao@gmail.com>
Date: Sat, 12 Mar 2022 21:17:44 -0700
Subject: [PATCH] Fix NavBar Overflow Issue

---
 include/style/navbar.styl | 9 ++++++++-
 layout/common/navbar.jsx  | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/include/style/navbar.styl b/include/style/navbar.styl
index a11191c..96af041 100644
--- a/include/style/navbar.styl
+++ b/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
\ No newline at end of file
+        max-height: $logo-height
+
+@media screen and (min-width: $desktop)
+    .navbar > .container .navbar-menu, .container > .navbar .navbar-menu
+        margin-right: 0rem
diff --git a/layout/common/navbar.jsx b/layout/common/navbar.jsx
index b60ef34..4414c0f 100644
--- a/layout/common/navbar.jsx
+++ b/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}