Merge pull request #50 from stackabletech/24-pin-top-level-menu

pin top level menu
stackabletech · Nov 15, 2023 · c8910b3 · c8910b3
2 parents 5d05a8e + c0a4691
commit c8910b3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -176,11 +176,14 @@ body {
 
 .navbar-sub {
   display: block;
-  position: relative;
   background-color: var(--color-brand-primary);
   padding: 5px 15px 5px 0;
   transition: all 0.5s;
-  height: 42px;
+  height: var(--navbar-sub-height);
+  position: fixed;
+  top: var(--navbar-height);
+  width: 100%;
+  z-index: var(--z-index-navbar);
   /* overflow: hidden; */
 }
 

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -121,9 +121,10 @@
   --footer-link-font-color: var(--color-smoke-70);
   /* dimensions and positioning */
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
+  --navbar-sub-height: calc(45 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
-  --body-top: var(--navbar-height);
+  --body-top: calc(var(--navbar-height) + var(--navbar-sub-height));
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
   --nav-height--desktop: var(--body-min-height);