mega menu fix

all-product.html

@@ -133,7 +133,7 @@
             <!-- main navigation -->
             <div class="main-nav  bg-black text-white">
                 
-                <div class="container position-relative py-2">
+                <div class="container position-relative">
 
                     <button class="btn d-block d-xl-none ms-auto burger-close-btn">
                         <img src="./images/icon/cross-icon.svg" alt="">
@@ -141,7 +141,7 @@
 
                     <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Makeup
@@ -545,7 +545,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Skincare
@@ -949,7 +949,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     K beauty
@@ -1353,7 +1353,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Heir
@@ -1758,7 +1758,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Man
@@ -2163,7 +2163,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Baby
@@ -2568,7 +2568,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Fragnace
@@ -2973,7 +2973,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Healthcare
@@ -3377,7 +3377,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Lifestyle
@@ -3781,7 +3781,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Pet
@@ -4185,7 +4185,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Gifts
@@ -4589,7 +4589,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Brands
@@ -4993,7 +4993,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Makeup

checkout.html

@@ -129,7 +129,7 @@
             <!-- main navigation -->
             <div class="main-nav  bg-black text-white">
                 
-                <div class="container position-relative py-2">
+                <div class="container position-relative">
 
                     <button class="btn d-block d-xl-none ms-auto burger-close-btn">
                         <img src="./images/icon/cross-icon.svg" alt="">
@@ -137,7 +137,7 @@
 
                     <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Makeup
@@ -541,7 +541,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Skincare
@@ -945,7 +945,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     K beauty
@@ -1349,7 +1349,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Heir
@@ -1754,7 +1754,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Man
@@ -2159,7 +2159,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Baby
@@ -2564,7 +2564,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Fragnace
@@ -2969,7 +2969,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Healthcare
@@ -3373,7 +3373,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Lifestyle
@@ -3777,7 +3777,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Pet
@@ -4181,7 +4181,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Gifts
@@ -4585,7 +4585,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Brands
@@ -4989,7 +4989,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Makeup

css/style.css

@@ -333,7 +333,7 @@ a {
     z-index: 20;
     transition: all 5s ease-in-out;
     box-shadow: var(--shadow-product);
-    z-index: 120;
+    z-index: 150;
 }
 
 
@@ -505,7 +505,7 @@ a {
         bottom: 0;
         overflow-y: auto;
         display: none;
-        z-index: 20;
+        z-index: 200 !important;
     }
 
     #header .main-nav::-webkit-scrollbar {

index.html

@@ -130,7 +130,7 @@
         <!-- main navigation -->
         <div class="main-nav  bg-black text-white">
             
-            <div class="container position-relative py-2">
+            <div class="container position-relative">
 
                 <button class="btn d-block d-xl-none ms-auto burger-close-btn">
                     <img src="./images/icon/cross-icon.svg" alt="">
@@ -138,7 +138,7 @@
 
                 <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Makeup
@@ -542,7 +542,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Skincare
@@ -946,7 +946,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 K beauty
@@ -1350,7 +1350,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Heir
@@ -1755,7 +1755,7 @@
                     </li>
 
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Man
@@ -2160,7 +2160,7 @@
                     </li>
 
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Baby
@@ -2565,7 +2565,7 @@
                     </li>
 
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Fragnace
@@ -2970,7 +2970,7 @@
                     </li>
 
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Healthcare
@@ -3374,7 +3374,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Lifestyle
@@ -3778,7 +3778,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Pet
@@ -4182,7 +4182,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Gifts
@@ -4586,7 +4586,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Brands
@@ -4990,7 +4990,7 @@
 
                     </li>
 
-                    <li class="megamenu-parrent mx-2">
+                    <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                         <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                             <span>
                                 Makeup

js/app.js

@@ -21,35 +21,95 @@ const searchButton = document.querySelector(".search-btn-mobile")
 
 
   // header mega menu
-
   const megaMenuContainer = document.querySelectorAll(".megamenu-parrent");
-
   const menuItemsAll = document.querySelectorAll(".menu-items");
 
 
-  if(megaMenuContainer) {
-    megaMenuContainer.forEach(container => {
+  // megamenu open close for mobile
+  function megamenuClickToggle () {
+
+    if(megaMenuContainer) {
+      megaMenuContainer.forEach(container => {
+  
+        const megaButton = container.querySelector(".collapse-buton");
+  
+        const menuItems = container.querySelector(".menu-items")
+  
+        if(megaButton && menuItems) {
+          megaButton.addEventListener("click", () => {
+            menuItems.classList.toggle("active");
+  
+            menuItemsAll.forEach(item => {
+              if (item !== menuItems) {
+                item.classList.remove("active")
+              }
+            })
+          })
+        }
+      })
+    }
 
-      const megaButton = container.querySelector(".collapse-buton");
+  };
 
-      const menuItems = container.querySelector(".menu-items")
+  // for desktop megamenu open
+  function megamenuHoverOpen  () {
+    if(megaMenuContainer) {
+      megaMenuContainer.forEach(container => {
+  
+        const menuItems = container.querySelector(".menu-items")
 
-      if(megaButton && menuItems) {
-        megaButton.addEventListener("click", () => {
-          menuItems.classList.toggle("active");
+          container.addEventListener("mouseover", () => {
+            menuItems.classList.add("active");
 
-          menuItemsAll.forEach(item => {
-            if (item !== menuItems) {
-              item.classList.remove("active")
-            }
+            menuItemsAll.forEach(item => {
+              if (item !== menuItems) {
+                item.classList.remove("active")
+              }
+            })
           })
-        })
-      }
-    })
-  }
 
+      })
+    }
+  };
 
-  // header sub-menu
+  // for desktop megamenu close
+  function megamenuHoverClose  () {
+    if(megaMenuContainer) {
+      megaMenuContainer.forEach(container => {
+  
+        const menuItems = container.querySelector(".menu-items")
+
+          container.addEventListener("mouseleave", () => {
+            console.log("first")
+            menuItems.classList.remove("active");
+          })
+
+      })
+    }
+  };
+
+
+  const resizeFunction = () => {
+    console.log(window.innerWidth)
+    if(window.innerWidth > 1199) {
+      megamenuHoverOpen();
+      megamenuHoverClose();
+    } else {
+      megamenuClickToggle();
+    }
+  };
+
+  resizeFunction();
+
+  window.addEventListener("resize", ()=> {
+    resizeFunction()
+  });
+
+    // header mega menu end
+
+
+    
+  // header mega sub-menu
 
   const megaSubMenu = document.querySelectorAll('.megamenu-submenu .items');
 
@@ -77,7 +137,7 @@ const searchButton = document.querySelector(".search-btn-mobile")
     })
 
   }
-
+  // header mega sub-menu end
 
 
   // burger menu function
@@ -98,6 +158,7 @@ const searchButton = document.querySelector(".search-btn-mobile")
       mainNav.classList.remove("active")
     })
   }
+  // burger menu function end
 
 
 

product-details.html

@@ -133,7 +133,7 @@
             <!-- main navigation -->
             <div class="main-nav  bg-black text-white">
                 
-                <div class="container position-relative py-2">
+                <div class="container position-relative">
 
                     <button class="btn d-block d-xl-none ms-auto burger-close-btn">
                         <img src="./images/icon/cross-icon.svg" alt="">
@@ -141,7 +141,7 @@
 
                     <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Makeup
@@ -545,7 +545,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Skincare
@@ -949,7 +949,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     K beauty
@@ -1353,7 +1353,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Heir
@@ -1758,7 +1758,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Man
@@ -2163,7 +2163,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Baby
@@ -2568,7 +2568,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Fragnace
@@ -2973,7 +2973,7 @@
                         </li>
 
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Healthcare
@@ -3377,7 +3377,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Lifestyle
@@ -3781,7 +3781,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Pet
@@ -4185,7 +4185,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Gifts
@@ -4589,7 +4589,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Brands
@@ -4993,7 +4993,7 @@
 
                         </li>
 
-                        <li class="megamenu-parrent mx-2">
+                        <li class="megamenu-parrent mx-2 py-0 py-xl-2">
                             <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
                                 <span>
                                     Makeup