1 files changed, 18 insertions, 9 deletions

diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 8fc4564..03118a9 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,16 +2,17 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --pad-y:     1em,
+            --pad-y:     .5rem,
             --item: (
-                --pad-x: 1em,
-                --pad-y: 1em,
+                --pad-x: 1rem,
+                --pad-y: 1rem,
             ),
         ),
         --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
             --logo: (
                 --idle: (
-                    --fg: prop(--colors --fg-hi, $global: true),
+                    --fg: prop(--colors --accent --color, $global: true),
                 ),
                 --hover: (
                     --fg: prop(--colors --fg-lo, $global: true),
@@ -33,7 +34,6 @@
 
     @include store((
         --dims: (
-            --pad-y: .5em,
             --item: (
                 --pad-x: .75em,
                 --pad-y: .75em,
@@ -42,10 +42,15 @@
     ), 'sm');
 
     @include component(namespace()) {
-        display:     flex;
-        align-items: center;
-        padding:     prop(--dims --pad-y) 0;
-        font-size:   prop(--dims --font-size);
+        display:          flex;
+        position:         fixed;
+        z-index:          10000;
+        top:              0;
+        left:             0;
+        align-items:      center;
+        padding:          prop(--dims --pad-y) 0;
+        background-color: prop(--colors --bg);
+        font-size:        prop(--dims --font-size);
 
         @include element('logo') {
             display:         inline-block;
@@ -90,5 +95,9 @@
                 font-weight:  bold;
             }
         }
+
+        @include media('<=md') {
+            position: static;
+        }
     }
 }