🐛 Fix hamburger menu positioning in mobile browsers

Fixes #399

CHANGELOG.md

@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Code highlight background cut off in Google Chrome when overflowing content area ([#383](https://github.com/jpanther/congo/pull/383))
 - Social icons shift position during CSS transition when hovered in Safari ([#396](https://github.com/jpanther/congo/pull/396))
+- Hamburger navigation menu is misaligned in mobile browsers ([#399](https://github.com/jpanther/congo/pull/399))
 - Error when attempting to resize SVG assets in page bundles ([#427](https://github.com/jpanther/congo/pull/427))
 - Appearance switcher missing `aria-label` ([#438](https://github.com/jpanther/congo/pull/438))
 - Article links missing `alt` text and `aria-label` ([#439](https://github.com/jpanther/congo/pull/439))

assets/css/compiled/main.css

@@ -1020,6 +1020,7 @@ body button {
 /* Hamburger menu */
 
 body:has(#menu-controller:checked) {
+  position: fixed;
   overflow-y: hidden;
 }
 

assets/css/main.css

@@ -23,7 +23,7 @@ body button {
 
 /* Hamburger menu */
 body:has(#menu-controller:checked) {
-  @apply overflow-y-hidden;
+  @apply fixed overflow-y-hidden;
 }
 #menu-button:has(#menu-controller:checked) {
   @apply invisible;

layouts/partials/header/hamburger.html

@@ -14,10 +14,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
         >
           <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"

layouts/partials/header/hybrid.html

@@ -14,10 +14,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
         >
           <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@@ -51,7 +51,7 @@
         </div>
       </label>
       {{/* Basic menu */}}
-      <ul class="hidden list-none flex-row ltr:text-right rtl:text-left sm:flex">
+      <ul class="flex-row hidden list-none ltr:text-right rtl:text-left sm:flex">
         {{ if .Site.Menus.main }}
           {{ range .Site.Menus.main }}
             <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">