[DURACOM-180] Prevent header from covering media viewer controls (bas…

…e theme) (cherry picked from commit c042cd8)
DSpace · Nov 9, 2023 · c6ade09 · c6ade09
1 parent 5f46b63
commit c6ade09
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<div [ngClass]="{'open': !(isNavBarCollapsed | async)}" id="header-navbar-wrapper">
     <ds-themed-header></ds-themed-header>
     <ds-themed-navbar></ds-themed-navbar>
 </div>
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,4 +1,6 @@
 :host {
   position: relative;
-  z-index: var(--ds-nav-z-index);
+  div#header-navbar-wrapper {
+    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+  }
 }
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
@@ -1,6 +1,5 @@
 nav.navbar {
     background-color: var(--ds-navbar-bg);
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
 }
 
@@ -12,9 +11,11 @@ nav.navbar {
         position: absolute;
         overflow: hidden;
         height: 0;
+        z-index: var(--ds-nav-z-index);
         &.open {
           height: auto;
           min-height: 100vh; //doesn't matter because wrapper is sticky
+          border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
         }
     }
 }