diff --git a/app/assets/stylesheets/navigation/general.scss b/app/assets/stylesheets/navigation/general.scss
index 97d6518f4..ea5f162f9 100644
--- a/app/assets/stylesheets/navigation/general.scss
+++ b/app/assets/stylesheets/navigation/general.scss
@@ -51,9 +51,6 @@ body.navigator-collapsed {
   .sci--layout-navigation-top {
     grid-area: top;
     height: var(--top-navigation-height);
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
     width: 100%;
     z-index: 610;
   }
@@ -69,13 +66,14 @@ body.navigator-collapsed {
   }
 
   .sci--layout-navigation-navigator {
+    --navigator-top-margin: 0px;
     background-color: var(--sn-white);
     grid-area: navigator;
-    height: calc(100vh - var(--top-navigation-height) - var(--breadcrumbs-navigation-height) - 1rem);
+    height: calc(100vh - var(--navbar-height) - 1rem - var(--navigator-top-margin));
     position: sticky;
     position: -webkit-sticky;
-    top: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
-    transition: .4s $timing-function-sharp;
+    top: 1rem;
+    transition: width .4s $timing-function-sharp;
     width: var(--navigator-navigation-width);
     z-index: 550;
   }
@@ -84,9 +82,6 @@ body.navigator-collapsed {
     background-color: var(--sn-white);
     grid-area: breadcrumbs;
     height: var(--breadcrumbs-navigation-height);
-    position: sticky;
-    position: -webkit-sticky;
-    top: var(--top-navigation-height);
     transition: .4s $timing-function-sharp;
     width: 100%;
     z-index: 600;
@@ -104,6 +99,8 @@ body.navigator-collapsed {
   }
 
   &[data-grey-background="true"] {
+    background-color: var(--sn-super-light-grey);
+
     .sci--layout-content,
     .sci--layout-navigation-breadcrumbs,
     .sci--layout-navigation-navigator {
diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss
index 663b8159d..d59380123 100644
--- a/app/assets/stylesheets/shared/content_pane.scss
+++ b/app/assets/stylesheets/shared/content_pane.scss
@@ -19,7 +19,7 @@
       background-color: inherit;
       position: sticky;
       position: -webkit-sticky;
-      top: var(--navbar-height);
+      top: 0;
       z-index: 250;
     }
 
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index fb8434ead..20869421a 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -37,6 +37,24 @@ $(document).on('click', '.btn', function() {
   $(this).blur();
 });
 
+$(document).on('turbolinks:load', () => {
+  $(window).on('scroll', () => {
+    const navbarHeight = 116;
+    let scrollPosition = $(window).scrollTop();
+    if (scrollPosition > navbarHeight) {
+      scrollPosition = navbarHeight;
+    }
+    $('.sci--layout').css(
+      '--navbar-height',
+      `calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height) - ${scrollPosition}px)`
+    );
+    $('.sci--layout-navigation-navigator').css(
+      '--navigator-top-margin',
+      ((scrollPosition / navbarHeight) * 16) + 'px'
+    );
+  });
+});
+
 // Needed to support Turbolinks redirect_to responses as unsafe-inline is blocked by the CSP
 $.ajaxSetup({
   converters: {