1 files changed, 44 insertions, 41 deletions

diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index a3f7004..60b3584 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,51 +1,54 @@
 .c-nav {
-  background-color: var(--nav--bg);
-  font-size: $nav--font-size;
-
-  &__items {
-    display: flex;
-    align-items: baseline;
-  }
-
-  &__logo {
-    display: inline-block;
-    margin: 0;
-    padding: $nav--item--pad-v 0;
-    color: var(--nav--logo--fg);
-    text-decoration: none;
-
-    &:link,
-    &:visited {
-      &:hover {
-        background-color: transparent;
-        color: var(--nav--item--hover--fg);
-        font-weight: bold;
-      }
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+    background-color: var(--nav--bg);
+    font-size: $nav--font-size;
+
+    &__items {
+        display: flex;
+        align-items: baseline;
     }
-  }
-
-  &__item {
-    display: inline-block;
-    padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
-    margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
-    color: var(--nav--item--idle--fg);
-    text-decoration: none;
-    border-bottom: 2px solid transparent;
-
-    &:hover {
-      background-color: transparent;
-      color: var(--nav--item--hover--fg);
-      font-weight: bold;
+
+    &__logo {
+        display: inline-block;
+        margin: 0;
+        padding: $nav--item--pad-v 0;
+        color: var(--nav--logo--fg);
+        text-decoration: none;
+
+        &:link,
+        &:visited {
+            &:hover {
+                background-color: transparent;
+                color: var(--nav--item--hover--fg);
+                font-weight: bold;
+            }
+        }
     }
-  }
 
-  @media (max-width: map-get($breakpoints, "sm")) {
     &__item {
-      margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
+        display: inline-block;
+        margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
+        padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
+        border-bottom: 2px solid transparent;
+        color: var(--nav--item--idle--fg);
+        text-decoration: none;
+
+        &:hover {
+            background-color: transparent;
+            color: var(--nav--item--hover--fg);
+            font-weight: bold;
+        }
+    }
+
+    @media (max-width: map-get($breakpoints, 'sm')) {
+        &__item {
+            margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
+        }
     }
-  }
 
-  /*
+    /*
     @media (max-width: map-get($breakpoints, "xs")) {
         &__logo {
             display: none;