Change menu
This commit is contained in:
@@ -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 */
|
||||
1
themes/classic/assets/css/custom.css.map
Normal file
1
themes/classic/assets/css/custom.css.map
Normal 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"}
|
||||
52
themes/classic/assets/css/custom.scss
Normal file
52
themes/classic/assets/css/custom.scss
Normal 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
@@ -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
@@ -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"></i>
|
||||
<i class="material-icons remove"></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>
|
||||
@@ -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"></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>
|
||||
|
||||
Reference in New Issue
Block a user