fix nav bar being stacked in mobile. fixed header and subtitle positioning in mobile views

public/site-styles/style.css

@@ -82,8 +82,9 @@
     .banner-title {
         font-size: 1.8rem;
         top: calc(var(--pico-typography-spacing-vertical) * 0.5);
-        left: var(--pico-spacing);
+        /* left: 50%; */
-        right: var(--pico-spacing);
+        right: auto;
+        /* transform: translateX(-50%); */
     }
 }
 
@@ -258,18 +259,44 @@
 }
 
 /* Mobile breakpoint - hide desktop nav and show mobile nav */
-@media (max-width: 768px) {
+@media (max-width: 767px) {
     .desktop-nav {
         display: none;
     }
     
     .mobile-nav {
         display: flex;
+        flex: 0 0 auto;
+    }
+    
+    /* Arrange mobile nav items horizontally */
+    header nav {
+        flex-direction: row !important;
+        justify-content: space-between !important;
+        align-items: center;
+        gap: 0;
+    }
+    
+    /* Make the About/theme toggle ul display as flex */
+    header nav > ul:not(.desktop-nav):not(.mobile-nav) {
+        display: flex !important;
+        gap: calc(var(--pico-spacing) * 0.5);
+        align-items: center;
+        flex: 0 0 auto;
+        margin: 0;
+    }
+    
+    header nav > ul:not(.desktop-nav):not(.mobile-nav) {
+        padding: 0;
+    }
+    
+    header nav > ul:not(.desktop-nav):not(.mobile-nav) li {
+        margin: 0;
     }
     
-    /* Style the dropdown for mobile */
     .mobile-nav .dropdown {
-        width: 100%;
+        width: auto;
+        min-width: 120px;
     }
     
     .mobile-nav .dropdown summary {