styles: sticky navbar

fairnesscoop · Apr 26, 2024 · 0c01db9 · 0c01db9
1 parent ca9a889
commit 0c01db9
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/src/assets/styles/components/header.css b/src/assets/styles/components/header.css
@@ -2,4 +2,5 @@
   position: sticky;
   top: 0;
   background-color: var(--background-default);
+  height: var(--header-height-desktop);
 }
diff --git a/src/assets/styles/components/nav.css b/src/assets/styles/components/nav.css
@@ -13,6 +13,12 @@
 
 .pc-nav.pc-desktop-only {
   display: none;
+  position: relative;
+}
+
+.pc-nav.pc-desktop-only > ul {
+  position: sticky;
+  top: var(--header-height-desktop);
 }
 
 pc-nav-menu-button > button {

diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
@@ -63,6 +63,7 @@
   --event-other-border: rgb(244, 245, 247);
   --event-other-text: rgb(36, 38, 45);
   --event-today: #fcf8e3;
+  --header-height-desktop: 56px;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/templates/components/header.njk b/src/templates/components/header.njk
@@ -1,6 +1,6 @@
 {% import 'macros/icons.njk' as icons %}
 
-<header class="pc-header pc-cluster pc-shadow pc-p" style="--cluster-justify: space-between; z-index: 2; --p: calc(3 * var(--v)) calc(6 * var(--v))">    
+<header class="pc-header pc-cluster pc-shadow pc-p" style="--cluster-justify: space-between; --cluster-align: center; z-index: 2; --p: 0 calc(6 * var(--v))">    
     <pc-nav-menu-button>
         <button aria-haspopup="true" aria-expanded="false" aria-controls="pc-nav-mobile-menu" aria-label="{{ 'nav-open'|trans }}">
             {{ icons.menu() }}