Add responsive dropdown menu behavior and style adjustments

themes/leo_gstore/assets/css/dr_materac.scss

@@ -5639,3 +5639,19 @@ body {
 .zoomContainer {
 	border: none !important;
 }
+
+.leo-top-menu {
+	ul.navbar-nav.megamenu {
+		> li.nav-item {
+			// &.dropdown {
+			&:nth-last-child(2) {
+				.dropdown-menu.level1 {
+					ul {
+						grid-template-columns: repeat(3, 270px);
+					}
+				}
+			}
+			// }
+		}
+	}
+}

themes/leo_gstore/assets/js/custom.js

@@ -1050,4 +1050,25 @@ $(document).ready(function(){
 			$(headerNav).removeClass('fixed');
 		}
 	})
-})
+})
+
+$(document).ready(function () {
+    $('.nav-item.parent.dropdown').on('mouseenter', function () {
+        var $submenu = $(this).find('.dropdown-menu');
+        
+        if ($submenu.length) {
+            $submenu.css({ left: '', right: '', transform: '' });
+            
+            var submenuRect = $submenu[0].getBoundingClientRect();
+            var windowWidth = $(window).width();
+            
+            if (submenuRect.right > windowWidth) {
+                $submenu.attr('style', 'left: 50% !important; right: auto !important; transform: translateX(-50%) !important;');
+            } else if (submenuRect.left < 0) {
+                $submenu.attr('style', 'left: 50% !important; right: auto !important; transform: translateX(-50%) !important;');
+            } else {
+                $submenu.css({ left: '', right: '', transform: '' });
+            }
+        }
+    });
+});