diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html
index e879bbc2..4f5f3fd2 100644
--- a/src/routes/_components/NavItem.html
+++ b/src/routes/_components/NavItem.html
@@ -124,6 +124,14 @@
     fill: var(--nav-svg-fill-hover);
   }
 
+  .main-nav-link:active {
+    background-color: var(--nav-active-bg);
+  }
+
+  .main-nav-link.selected:active {
+    background-color: var(--nav-a-selected-active-bg);
+  }
+
   .nav-link-svg {
     display: inline-block;
     fill: var(--nav-svg-fill);
@@ -220,9 +228,14 @@
         if (!selected) {
           return
         }
+        let scroller = getScrollContainer()
+        let { scrollTop } = scroller
+        if (scrollTop === 0) {
+          return
+        }
         e.preventDefault()
         e.stopPropagation()
-        smoothScroll(getScrollContainer(), 0)
+        smoothScroll(scroller, 0)
       }
     }
   }
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index c11551cd..c56dee63 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -26,10 +26,12 @@
   --form-border: #{darken($border-color, 10%)};
 
   --nav-bg: #{$main-theme-color};
+  --nav-active-bg: #{lighten($main-theme-color, 9%)};
   --nav-border: #{darken($main-theme-color, 10%)};
   --nav-a-border: #{$main-theme-color};
   --nav-a-selected-border: #{$secondary-text-color};
   --nav-a-selected-bg: #{lighten($main-theme-color, 10%)};
+  --nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
   --nav-svg-fill: #{$secondary-text-color};
   --nav-text-color: #{$secondary-text-color};
 
diff --git a/src/scss/themes/_dark_navbar.scss b/src/scss/themes/_dark_navbar.scss
new file mode 100644
index 00000000..b5d4a794
--- /dev/null
+++ b/src/scss/themes/_dark_navbar.scss
@@ -0,0 +1,10 @@
+:root {
+  --nav-bg: #{lighten($body-bg-color, 10%)};
+  --nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
+  --nav-active-bg: #{lighten($body-bg-color, 35%)};
+  --nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
+  --nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
+  --nav-a-selected-active-bg: #{lighten($body-bg-color, 50%)};
+
+  --button-primary-bg: #{darken($main-theme-color, 5%)};
+}
diff --git a/src/scss/themes/hacker.scss b/src/scss/themes/hacker.scss
index 115a88a1..79fb4297 100644
--- a/src/scss/themes/hacker.scss
+++ b/src/scss/themes/hacker.scss
@@ -13,13 +13,5 @@ $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
-
-:root {
-  --nav-bg: #{lighten($body-bg-color, 10%)};
-  --nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
-  --nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
-  --nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
-
-  --button-primary-bg: #{darken($main-theme-color, 5%)};
-}
diff --git a/src/scss/themes/punk.scss b/src/scss/themes/punk.scss
index 2e7e5ff1..44e6fb9f 100644
--- a/src/scss/themes/punk.scss
+++ b/src/scss/themes/punk.scss
@@ -13,13 +13,5 @@ $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
-
-:root {
-  --nav-bg: #{lighten($body-bg-color, 10%)};
-  --nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
-  --nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
-  --nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
-
-  --button-primary-bg: #{darken($main-theme-color, 5%)};
-}
diff --git a/src/scss/themes/riot.scss b/src/scss/themes/riot.scss
index cb9ab20b..bdb108a2 100644
--- a/src/scss/themes/riot.scss
+++ b/src/scss/themes/riot.scss
@@ -13,13 +13,5 @@ $compose-background: lighten($main-theme-color, 52%);
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
-
-:root {
-  --nav-bg: #{lighten($body-bg-color, 10%)};
-  --nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
-  --nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
-  --nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
-
-  --button-primary-bg: #{darken($main-theme-color, 5%)};
-}
diff --git a/src/scss/themes/sorcery.scss b/src/scss/themes/sorcery.scss
index d9ee45fa..0981798b 100644
--- a/src/scss/themes/sorcery.scss
+++ b/src/scss/themes/sorcery.scss
@@ -18,13 +18,5 @@ $scrollbar-face-active: #{lighten($main-theme-color, 1%)};
 
 @import "_base.scss";
 @import "_dark.scss";
+@import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
-
-:root {
-  --nav-bg: #{lighten($body-bg-color, 10%)};
-  --nav-a-selected-bg: #{lighten($body-bg-color, 25%)};
-  --nav-a-bg-hover: #{lighten($body-bg-color, 25%)};
-  --nav-a-selected-bg-hover: #{lighten($body-bg-color, 40%)};
-
-  --button-primary-bg: #{darken($main-theme-color, 5%)};
-}
\ No newline at end of file