diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
index a4d83b82ea7..52634f2a5b6 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -5,8 +5,8 @@
 .breadcrumb {
   border-radius: 0;
   margin-top: calc(-1 * var(--ds-content-spacing));
-  padding-bottom: var(--ds-content-spacing / 3);
-  padding-top: var(--ds-content-spacing / 3);
+  padding-bottom: calc(var(--ds-content-spacing) / 3);
+  padding-top: calc(var(--ds-content-spacing) / 3);
   background-color: var(--ds-breadcrumb-bg);
 }
 
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 871adf289c6..8539ca8fbfc 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,3 +1,7 @@
+header {
+  background-color: var(--ds-header-bg);
+}
+
 .navbar-brand img {
   max-height: var(--ds-header-logo-height);
   max-width: 100%;
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 65de77b6007..28db981f115 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -6,14 +6,20 @@
 }
 
 .dropdown-menu {
+    background-color: var(--ds-expandable-navbar-bg);
     overflow: hidden;
     min-width: 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     ::ng-deep a.nav-link {
+        color: var(--ds-expandable-navbar-link-color) !important;
         padding-right: var(--bs-spacer);
         padding-left: var(--bs-spacer);
         white-space: nowrap;
+
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-color-hover) !important;
+        }
     }
 }
 
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 441ee82c968..9dc530607cf 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,4 +1,5 @@
 nav.navbar {
+    background-color: var(--ds-navbar-bg);
     border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index ddf490c7a7a..778ef6e9e3a 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -24,10 +24,14 @@
   --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$link-color};
   --ds-header-icon-color-hover: #{$link-hover-color};
+  --ds-navbar-bg: var(--ds-header-bg);
   --ds-header-navbar-border-top-color: #{$white};
   --ds-header-navbar-border-bottom-color: #{$gray-400};
   --ds-navbar-link-color: #{$cyan};
   --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
+  --ds-expandable-navbar-bg: var(--ds-navbar-bg);
+  --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
+  --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
 
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 7c2a6436877..b3d4fdb2aa5 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -4,6 +4,10 @@ nav.navbar {
   align-items: baseline;
 }
 
+.navbar-nav {
+  background-color: var(--ds-navbar-bg);
+}
+
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
   .navbar {