Change menu

.vscode/sftp.json

@@ -0,0 +1,12 @@
+{
+    "name": "www.kikiriki.sklep.pl",
+    "host": "kikiriki.sklep.pl",
+    "username": "biuro@kikiriki.sklep.pl",
+    "password": "0J-%@-gAzl*6#NY)",
+    "remotePath": "/domains/kikiriki.sklep.pl/public_html",
+    "protocol": "ftp",
+    "port": 0,
+    "uploadOnSave": false,
+    "useTempFile": false,
+    "openSsh": false
+}

themes/classic/assets/css/custom.css

@@ -1,4 +1,36 @@
-/*
+.nav_menu_box.box_fixed {
- * Custom code goes here.
+  position: fixed;
- * A template should always ship with an empty custom.css
+  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();
+});

themes/classic/modules/ps_mainmenu/ps_mainmenu.tpl

@@ -13,7 +13,7 @@
                 {if $node.children|count}
                   {* Cannot use page identifier as we can have the same page several times *}
                   {assign var=_expand_id value=10|mt_rand:100000}
-                  <span class="float-xs-right hidden-md-up">
+                  <span class="float-xs-right hidden-lg-up">
                     <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                       <i class="material-icons add">&#xE313;</i>
                       <i class="material-icons remove">&#xE316;</i>
@@ -33,7 +33,15 @@
     {/if}
 {/function}
 
+<div class="nav_menu_box hidden-md-down">
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-12">
         <div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
             {menu nodes=$menu.children}
             <div class="clearfix"></div>
         </div>
+      </div>
+    </div>
+  </div>
+</div>

themes/classic/templates/_partials/header.tpl

@@ -32,7 +32,7 @@
   <nav class="header-nav">
     <div class="container">
       <div class="row">
-        <div class="hidden-sm-down">
+        <div class="hidden-md-down">
           <div class="col-md-5 col-xs-12">
             {hook h='displayNav1'}
           </div>
@@ -40,7 +40,7 @@
               {hook h='displayNav2'}
           </div>
         </div>
-        <div class="hidden-md-up text-sm-center mobile">
+        <div class="hidden-lg-up text-sm-center mobile">
           <div class="float-xs-left" id="menu-icon">
             <i class="material-icons d-inline">&#xE5D2;</i>
           </div>
@@ -58,7 +58,7 @@
   <div class="header-top" t="1">
     <div class="container">
        <div class="row">
-        <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
+        <div class="col-md-2 hidden-lg-down" id="_desktop_logo">
           {if $shop.logo_details}
             {if $page.page_name == 'index'}
               <h1>
@@ -69,11 +69,11 @@
             {/if}
           {/if}
         </div>
-        <div class="header-top-right col-md-10 col-sm-12 position-static">
+        <div class="header-top-right col-md-12 col-sm-12 position-static">
           {hook h='displayTop'}
         </div>
       </div>
-      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
+      <div id="mobile_top_menu_wrapper" class="row hidden-lg-up" style="display:none;">
         <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
         <div class="js-top-menu-bottom">
           <div id="_mobile_currency_selector"></div>