diff --git a/js/src/common/Application.js b/js/src/common/Application.js
index 4218e1b83..1fb2017f2 100644
--- a/js/src/common/Application.js
+++ b/js/src/common/Application.js
@@ -198,13 +198,19 @@ export default class Application {
     m.route(document.getElementById('content'), basePath + '/', mapRoutes(this.routes, basePath));
 
     // Add a class to the body which indicates that the page has been scrolled
-    // down.
-    new ScrollListener((top) => {
+    // down. When this happens, we'll add classes to the header and app body
+    // which will set the navbar's position to fixed. We don't want to always
+    // have it fixed, as that could overlap with custom headers.
+    const scrollListener = new ScrollListener((top) => {
       const $app = $('#app');
       const offset = $app.offset().top;
 
       $app.toggleClass('affix', top >= offset).toggleClass('scrolled', top > offset);
-    }).start();
+      $('.App-header').toggleClass('navbar-fixed-top', top >= offset);
+    });
+
+    scrollListener.start();
+    scrollListener.update();
 
     $(() => {
       $('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');
diff --git a/less/common/App.less b/less/common/App.less
index eaef1d2cb..b20588ac8 100644
--- a/less/common/App.less
+++ b/less/common/App.less
@@ -236,12 +236,16 @@
   .App-header {
     padding: 8px;
     height: @header-height;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     z-index: @zindex-header;
 
+    .affix & {
+      position: fixed;
+    }
+
     & when (@config-colored-header = true) {
       .light-contents(@header-color, @header-control-bg, @header-control-color);
     }
diff --git a/views/frontend/admin.blade.php b/views/frontend/admin.blade.php
index 38e29fb81..56a6aa2b9 100644
--- a/views/frontend/admin.blade.php
+++ b/views/frontend/admin.blade.php
@@ -4,7 +4,7 @@
 
     <div id="drawer" class="App-drawer">
 
-        <header id="header" class="App-header navbar-fixed-top">
+        <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
                 <h1 class="Header-title">
diff --git a/views/frontend/forum.blade.php b/views/frontend/forum.blade.php
index c6de4f301..595345ab3 100644
--- a/views/frontend/forum.blade.php
+++ b/views/frontend/forum.blade.php
@@ -6,7 +6,7 @@
 
     <div id="drawer" class="App-drawer">
 
-        <header id="header" class="App-header navbar-fixed-top">
+        <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
                 <h1 class="Header-title">