diff --git a/app/static/styles.css b/app/static/styles.css
index 5af33c2f..9be2be71 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -420,6 +420,7 @@ a {
 div.navbar {
   border-bottom: 1px solid rgba(0, 40, 100, 0.12);
   min-height: 60px;
+  background-color: var(--bs-body-bg);
 }
 
 .navbar-brand {
diff --git a/app/static/styles.scss b/app/static/styles.scss
index ac95255b..1dfd8689 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -29,6 +29,7 @@ a {
 div.navbar {
   border-bottom: 1px solid rgba(0, 40, 100, 0.12);
   min-height: 60px;
+  background-color: var(--bs-body-bg);
 }
 
 .navbar-brand {
diff --git a/app/templates/base.html b/app/templates/base.html
index cc4a8059..0b2db4d2 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -99,7 +99,7 @@
     <a href="#side_pane" class="skip-link" role="navigation" aria-label="Go to side pane" tabindex="">Go to side pane</a>
     <!-- Page content -->
     {% block navbar %}
-    <div class="navbar navbar-expand-lg">
+    <div class="navbar navbar-expand-lg sticky-md-top">
         <div class="{{ 'container-lg' if post_layout != 'masonry_wide' else 'container-fluid' }}" role="banner">
             <a class="navbar-brand" href="/">{% if not low_bandwidth %}<img src="/static/images/logo2.png" alt="Logo" width="50" height="50" />{% endif %}{{ g.site.name }}</a>
             {% if current_user.is_authenticated %}