From 7ed69fdf81d0c166bc9b973d4aa1c527ac44f06e Mon Sep 17 00:00:00 2001
From: Patrick G <geek1011@outlook.com>
Date: Mon, 22 May 2017 11:43:46 -0400
Subject: [PATCH 1/4] Scrollbars on overflow of horizontal nav

---
 public/css/index.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/public/css/index.css b/public/css/index.css
index 5721d8e9bc2b4..3e123099ae873 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -428,6 +428,26 @@ footer .ui.language .menu {
   background-color: #FAFAFA !important;
   border-width: 1px !important;
 }
+@media only screen and (max-width: 1200px) {
+  .ui.menu.new-menu {
+      overflow-x: auto !important;
+      justify-content: left !important;
+      padding-bottom: 5px;
+  }
+  .ui.menu.new-menu::-webkit-scrollbar {
+      height: 8px;
+      display: none;
+  }
+  .ui.menu.new-menu:hover::-webkit-scrollbar {
+    display: block;
+  }
+  .ui.menu.new-menu::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.01);
+  }
+  .ui.menu.new-menu::-webkit-scrollbar-thumb {
+      background:rgba(0,0,0,0.2);
+  }
+}
 .markdown:not(code) {
   overflow: hidden;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;

From a0b79fb297e7e4f854020fe35322101240229451 Mon Sep 17 00:00:00 2001
From: Patrick G <geek1011@outlook.com>
Date: Mon, 22 May 2017 11:48:18 -0400
Subject: [PATCH 2/4] Update _base.less

---
 public/less/_base.less | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/public/less/_base.less b/public/less/_base.less
index 7008b5c918c82..780ae27163f57 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -420,3 +420,24 @@ footer {
   background-color: #FAFAFA !important;
   border-width: 1px !important;
 }
+
+@media only screen and (max-width: 1200px) {
+  .ui.menu.new-menu {
+      overflow-x: auto !important;
+      justify-content: left !important;
+      padding-bottom: 5px;
+  }
+  .ui.menu.new-menu::-webkit-scrollbar {
+      height: 8px;
+      display: none;
+  }
+  .ui.menu.new-menu:hover::-webkit-scrollbar {
+    display: block;
+  }
+  .ui.menu.new-menu::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.01);
+  }
+  .ui.menu.new-menu::-webkit-scrollbar-thumb {
+      background:rgba(0,0,0,0.2);
+  }
+}

From bef92c0a54dbbedb596df4cc0f1f2b5952a55061 Mon Sep 17 00:00:00 2001
From: Patrick G <geek1011@outlook.com>
Date: Mon, 22 May 2017 12:11:27 -0400
Subject: [PATCH 3/4] Add fade out on right side of overflowing nav

---
 public/css/index.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/public/css/index.css b/public/css/index.css
index 3e123099ae873..b4d7341585a5d 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -447,6 +447,22 @@ footer .ui.language .menu {
   .ui.menu.new-menu::-webkit-scrollbar-thumb {
       background:rgba(0,0,0,0.2);
   }
+  .ui.menu.new-menu:after {
+    position: absolute;
+    margin-top: -15px;
+    display: block;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
+    content: ' ';
+    right: 0;
+    height: 53px;
+    z-index: 1000;
+    width: 60px;
+    clear: none;
+    visibility: visible;
+  }
+  .ui.menu.new-menu a.item:last-child {
+    padding-right: 30px !important;
+  }
 }
 .markdown:not(code) {
   overflow: hidden;

From f6d5db6bf37d039522bacbb9922941e5e0cee0f4 Mon Sep 17 00:00:00 2001
From: Patrick G <geek1011@outlook.com>
Date: Mon, 22 May 2017 12:11:47 -0400
Subject: [PATCH 4/4] Update _base.less

---
 public/less/_base.less | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/public/less/_base.less b/public/less/_base.less
index 780ae27163f57..757da2a66b21e 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -440,4 +440,20 @@ footer {
   .ui.menu.new-menu::-webkit-scrollbar-thumb {
       background:rgba(0,0,0,0.2);
   }
+  .ui.menu.new-menu:after {
+    position: absolute;
+    margin-top: -15px;
+    display: block;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
+    content: ' ';
+    right: 0;
+    height: 53px;
+    z-index: 1000;
+    width: 60px;
+    clear: none;
+    visibility: visible;
+  }
+  .ui.menu.new-menu a.item:last-child {
+    padding-right: 30px !important;
+  }
 }