ok

templates/partials/header_custom.html

@@ -9,8 +9,10 @@
 <header id="header-container">
     <div class="z-10 bg-white fixed w-screen">
         <div class="relative z-50 shadow">
-        <div class="mx-auto grid grid-cols-3 items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20">
-            <div class="hidden lg:flex lg:items-center lg:justify-center lg:space-x-12">
+        <div class="mx-auto flex items-center justify-between pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20">
+            <!-- Spacer for left side on desktop -->
+            <div class="hidden lg:flex-1 lg:flex"></div>
+            <div class="hidden lg:flex lg:items-center lg:justify-center">
             <nav class="flex space-x-10">
 
 {% for header_item in header_items %}
@@ -36,10 +38,10 @@
 {% endif %}
 {% endfor %}
 </nav>
-
-
             </div>
-            <div class="-mr-2 -my-2 lg:hidden">
+            <!-- Spacer for right side on desktop, and container for mobile menu button -->
+            <div class="flex-1 flex items-center justify-end">
+                <div class="-mr-2 -my-2 lg:hidden">
                 <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                     <!-- Heroicon name: menu -->
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -54,6 +56,7 @@
                 </button>
             </div>
         </div>
+    </div>
 {% for header_item in header_items %}
 {% if not loop.first %}
     {% set header_arr = header_item | split(pat="</li>") %}