Change menu

themes/classic/assets/css/custom.css

@@ -1,4 +1,36 @@
-/*
- * Custom code goes here.
- * A template should always ship with an empty custom.css
- */
+.nav_menu_box.box_fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
+}
+
+#_desktop_top_menu > ul.top-menu > li.category > a {
+  font-size: 14px;
+  padding: 10px 5px;
+}
+@media (max-width: 1200px) {
+  #_desktop_top_menu > ul.top-menu > li.category > a {
+    font-size: 12px;
+  }
+}
+#_desktop_top_menu > ul.top-menu > li.category .sub-menu ul.top-menu[data-depth="1"] {
+  margin: 0;
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px 20px;
+}
+#_desktop_top_menu > ul.top-menu > li.category .sub-menu ul.top-menu[data-depth="1"] > li.category {
+  margin: 0;
+  flex: 1;
+}
+#_desktop_top_menu > ul.top-menu > li.category .sub-menu ul.top-menu[data-depth="1"] > li.category > a {
+  padding: 0;
+}
+#_desktop_top_menu > ul.top-menu > li.category .sub-menu ul.top-menu[data-depth="2"] {
+  margin-top: 10px;
+}/*# sourceMappingURL=custom.css.map */

themes/classic/assets/css/custom.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["custom.scss","custom.css"],"names":[],"mappings":"AACC;EACC,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,gBAAA;EACA,2CAAA;ACAF;;ADOG;EACC,eAAA;EACA,iBAAA;ACJJ;ADMI;EAJD;IAKE,eAAA;ECHH;AACF;ADQK;EACC,SAAA;EAEA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;ACPN;ADSM;EACC,SAAA;EACA,OAAA;ACPP;ADSO;EACC,UAAA;ACPR;ADYK;EACC,gBAAA;ACVN","file":"custom.css"}

themes/classic/assets/css/custom.scss

@@ -0,0 +1,52 @@
+.nav_menu_box {
+	&.box_fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: #fff;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
+	}
+}
+
+#_desktop_top_menu {
+	> ul.top-menu {
+		> li.category {
+			> a {
+				font-size: 14px;
+				padding: 10px 5px;
+
+				@media (max-width: 1200px) {
+					font-size: 12px;
+				}
+			}
+
+			.sub-menu {
+				ul.top-menu {
+					&[data-depth='1'] {
+						margin: 0;
+
+						padding: 20px;
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						gap: 10px 20px;
+
+						> li.category {
+							margin: 0;
+							flex: 1;
+
+							> a {
+								padding: 0;
+							}
+						}
+					}
+
+					&[data-depth='2'] {
+						margin-top: 10px;
+					}
+				}
+			}
+		}
+	}
+}

themes/classic/assets/js/custom.js

@@ -2,3 +2,45 @@
  * Custom code goes here.
  * A template should always ship with an empty custom.js
  */
+jQuery(window).on('load', function () {
+  var $ = jQuery;
+
+  var $box = $('.nav_menu_box');
+  if (!$box.length) return;
+
+  var boxTop = 0;
+  var boxHeight = 0;
+
+  function recalc() {
+    boxTop = $box.offset().top;
+    boxHeight = $box.outerHeight();
+  }
+
+  function onScroll() {
+    if ($(window).width() <= 767) {
+      $box.removeClass('box_fixed');
+      $('#header').css('margin-bottom', 0);
+      return;
+    }
+
+    var scrollTop = $(window).scrollTop();
+
+    if (scrollTop >= boxTop) {
+      $box.addClass('box_fixed');
+      $('#header').css('margin-bottom', boxHeight);
+    } else {
+      $box.removeClass('box_fixed');
+      $('#header').css('margin-bottom', 0);
+    }
+  }
+
+  $(window).on('resize', function () {
+    recalc();
+    onScroll();
+  });
+
+  $(window).on('scroll', onScroll);
+
+  recalc();
+  onScroll();
+});