mobile search fix

css/style.css

@@ -479,12 +479,13 @@ a {
 @media screen and (max-width: 1199px) {
     #header .search  {
         position: absolute;
-        top: 120px;
+        top: 115px;
         width: 100%;
         display: none;
         z-index: 30;
-        background: var(--white);
-        padding: .25rem;
+        background: var(--white-light);
+        padding: 1rem;
+        box-shadow: var(--shadow-black);
     }
     #header .search.active  {
         display: block;

js/app.js

@@ -52,27 +52,32 @@ const searchButton = document.querySelector(".search-btn-mobile")
   // header sub-menu
 
   const megaSubMenu = document.querySelectorAll('.megamenu-submenu .items');
-  const subMenuItemsAll = document.querySelectorAll('.megamenu-submenu .submenu-items')
-
 
-  megaSubMenu.forEach(menu => {
-    const subMenuBtn = menu.querySelector('.submenu-buton');
-    const subMenuItems = menu.querySelector('.submenu-items')
+  const subMenuItemsAll = document.querySelectorAll('.megamenu-submenu .submenu-items')
 
-    if (subMenuItems && subMenuBtn) {
+  if(megaSubMenu) {
 
-      subMenuBtn.addEventListener('click', () => {
-        subMenuItems.classList.toggle('active')
+    megaSubMenu.forEach(menu => {
+      const subMenuBtn = menu.querySelector('.submenu-buton');
+      const subMenuItems = menu.querySelector('.submenu-items')
   
-        subMenuItemsAll.forEach(item => {
-          if (item !== subMenuItems) {
-            item.classList.remove("active")
-          }
+      if (subMenuItems && subMenuBtn) {
+  
+        subMenuBtn.addEventListener('click', () => {
+          subMenuItems.classList.toggle('active')
+    
+          subMenuItemsAll.forEach(item => {
+            if (item !== subMenuItems) {
+              item.classList.remove("active")
+            }
+          })
         })
-      })
-      
-    }
-  })
+        
+      }
+    })
+
+  }
+
 
 
   // burger menu function
@@ -139,8 +144,6 @@ const searchButton = document.querySelector(".search-btn-mobile")
   const checkoutContainer = document.querySelector('.checkout-container')
 
 
-
-
           // checkout open function for desktop
       if(checkoutProductBtnDesktop && checkoutContainer) {
         checkoutProductBtnDesktop.addEventListener('click', () => {