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

pin top level menu

Author: fhennig

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; */
 }
 

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);