sticky header

themes/mir/layouts/partials/nav.html

@@ -1,25 +1,13 @@
-<div
+<div class="m-4 rounded-lg p-4 min-h-[40.27px] flex flex-row justify-between bg-[#f1f5fc] sticky-navbar">
-  class="m-4 rounded-lg p-4 min-h-[40.27px] flex flex-row justify-between bg-[#f1f5fc]"
->
   {{ with site.GetPage "_index.md" }}
 
-  <a class="justify-center flex mb-2 sm:mb-0" aria-label="Back to home" href="/"
+  <a class="justify-center flex mb-2 sm:mb-0" aria-label="Back to home" href="/"><img class="h-[40.2667px]"
-    ><img
+      alt="{{ .Params.logoAlt }}" src="{{ .Params.logo }}" loading="lazy" /></a>
-      class="h-[40.2667px]"
+  <nav class="place-self-center h-8 flex justify-end gap-4 text-[#464f6d] pr-0 sm:pr-6">
-      alt="{{ .Params.logoAlt }}"
-      src="{{ .Params.logo }}"
-      loading="lazy"
-  /></a>
-  <nav
-    class="place-self-center h-8 flex justify-end gap-4 text-[#464f6d] pr-0 sm:pr-6"
-  >
     {{ range .Site.Menus.main }}
-    <a
+    <a style="white-space: nowrap"
-      style="white-space: nowrap"
       class="underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
-      href="{{ .URL }}"
+      href="{{ .URL }}" aria-label="{{ .Identifier }}">
-      aria-label="{{ .Identifier }}"
-    >
       {{ $text := print .Name | safeHTML }} {{ $text }}
     </a>
     {{ end }}

themes/mir/src/input.css

@@ -59,6 +59,12 @@
     font-style: normal;
   }
 
+  .sticky-navbar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 1rem;
+    z-index: 1000;
+  }
 
   body {
     font-family: 'Inter', sans-serif;