From fba8a95610645b49e92abaacdd8bf55b24c9f5cf Mon Sep 17 00:00:00 2001
From: Dinesh Salunke <dineshsalunke@consultbop.com>
Date: Fri, 3 Nov 2023 14:00:00 +0530
Subject: [PATCH] refactor: udpate the header to make it responsive

---
 templates/_partials/header.tpl | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/templates/_partials/header.tpl b/templates/_partials/header.tpl
index e7bbfea..0eb8e92 100644
--- a/templates/_partials/header.tpl
+++ b/templates/_partials/header.tpl
@@ -24,16 +24,20 @@
  *}
 
 {block name='header_top'}
-  <div class="header-top container mx-auto px-4 lg:px-0">
-    <div class="flex justify-between h-24 relative items-center">
-      <a class="flex-none z-10 w-12 h-12" href="{$urls.base_url}">
-        <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
-      </a>
-      <div class="absolute left-0 right-0 top-0 bottom-0 flex items-center z-0">
-        {hook h='displayMainMenu'}
+  <div class="container mx-auto">
+    <div class="relative -mx-4 flex items-center justify-between h-24">
+      <div class="w-12 max-w-full ">
+        <a class="block w-full " href="{$urls.base_url}">
+          <img class="w-full" src="{$shop.logo}" alt="{$shop.name}"/>
+        </a>
       </div>
-      <div class="flex gap-4 z-10 items-center">
-        {hook h='displayTop'}
+      <div class="flex w-full items-center justify-between px-4">
+        <div class="w-full">
+          {hook h='displayMainMenu'}
+        </div>
+        <div class="relative right-16 hidden items-center justify-end sm:flex lg:right-0">
+          {hook h='displayTop'}
+        </div>
       </div>
     </div>
   </div>