diff --git a/src/App.scss b/src/App.scss
index 180c0daf..80c5333b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -64,6 +64,7 @@ body {
   &.hidden {
     display: none;
   }
+  --top-nav-height: #{$top-nav-height};
 }
 
 a {
@@ -610,7 +611,7 @@ nav {
     margin-top: -10px;
 
     .sidebar-scroller {
-      height: 96vh;
+      height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
       width: 365px;
       padding-top: 10px;
       padding-right: 50px;
diff --git a/src/_variables.scss b/src/_variables.scss
index 099d3606..44252cfb 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -32,3 +32,5 @@ $fallback--chatMessageRadius: 10px;
 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 
 $status-margin: 0.75em;
+
+$top-nav-height: 50px;
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 2d468588..ee1f206b 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,7 +1,7 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
-  height: 50px;
+  height: var(--top-nav-height, $top-nav-height);
   width: 100%;
   position: fixed;
 
@@ -11,7 +11,7 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: var(--top-nav-height, $top-nav-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -77,7 +77,7 @@
 
     img {
       display: inline-block;
-      height: 50px;
+      height: var(--top-nav-height, $top-nav-height);
     }
   }
 
@@ -103,8 +103,8 @@
 
   .item {
     flex: 1;
-    line-height: 50px;
-    height: 50px;
+    line-height: var(--top-nav-height, $top-nav-height);
+    height: var(--top-nav-height, $top-nav-height);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index f5279b3e..028b36f4 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -92,9 +92,9 @@
 .MobileNav {
   .mobile-nav {
     display: grid;
-    line-height: 50px;
-    height: 50px;
-    grid-template-rows: 50px;
+    line-height: var(--top-nav-height, $top-nav-height);
+    height: var(--top-nav-height, $top-nav-height);
+    grid-template-rows: var(--top-nav-height, $top-nav-height);
     grid-template-columns: 2fr auto;
     width: 100%;
     position: fixed;
@@ -167,8 +167,8 @@
     justify-content: space-between;
     z-index: 1;
     width: 100%;
-    height: 50px;
-    line-height: 50px;
+    height: var(--top-nav-height, $top-nav-height);
+    line-height: var(--top-nav-height, $top-nav-height);
     position: absolute;
     color: var(--topBarText);
     background-color: $fallback--fg;
@@ -183,9 +183,9 @@
   }
 
   .mobile-notifications {
-    margin-top: 50px;
+    margin-top: var(--top-nav-height, $top-nav-height);
     width: 100vw;
-    height: calc(100vh - 50px);
+    height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
     overflow-x: hidden;
     overflow-y: scroll;