diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 091d152258..8c10efcb42 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,3 +1,3 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
   <ds-themed-header></ds-themed-header>
 </div>
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index e69de29bb2..1daf4ebdbc 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -0,0 +1,7 @@
+:host {
+  // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
+  position: relative;
+  div#header-navbar-wrapper {
+    border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+  }
+}
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index 57ade022ae..36e23e174a 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -6,7 +6,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
  */
 @Component({
   selector: 'ds-header-navbar-wrapper',
-  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
+  styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 300d1f419a..28ead2f1de 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -1,7 +1,9 @@
 nav.navbar {
-  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
-  border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
   align-items: baseline;
+
+  .navbar-inner-container {
+    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+  }
 }
 
 .navbar-nav {
@@ -16,8 +18,10 @@ nav.navbar {
     position: absolute;
     overflow: hidden;
     height: 0;
+    z-index: var(--ds-nav-z-index);
     &.open {
       height: 100vh; //doesn't matter because wrapper is sticky
+      border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
     }
   }
 }