Change menu

This commit is contained in:
Roman Pyrih
2025-11-12 12:45:24 +01:00
parent 4113c42da7
commit cd823a3b8c
9 changed files with 163 additions and 16 deletions

View File

@@ -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 */

View File

@@ -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"}

View File

@@ -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;
}
}
}
}
}
}

File diff suppressed because one or more lines are too long

View File

@@ -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();
});

File diff suppressed because one or more lines are too long

View File

@@ -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="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
<div class="clearfix"></div>
</div>
<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>

View File

@@ -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>