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 091d1522589..8c10efcb42e 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 e69de29bb2d..1daf4ebdbc3 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 57ade022aee..36e23e174af 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 b4b7a02e502..7b52ef61d3f 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,6 +18,7 @@ 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
     }