diabeticsockshop.myshopify.com MEGA MENU
/*
ADDED CODE
************************************************************
MEGA MENU tweaks
MAXX 10-12-2018
************************************************************
*/
.site-navigation-wrapper .navmenu-brands-list {
-webkit-flex-basis: 540px;
-ms-flex-preferred-size: 540px;
flex-basis: 540px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-width: 225px;
padding-right: $local-padding;
padding-left: $local-padding;
.navmenu-item {
margin-bottom: 20px;
}
.navmenu-item-logo {
width: 90px;
display: inline-block;
vertical-align: middle;
margin-right: 15px;
img {
display: inline-block;
max-width: 100%;
}
.navmenu-item-logo-a {
padding: 0;
}
}
.navmenu-item-desc {
font-weight: 300;
display: block;
font-size: 15px;
margin-top: 14px;
word-wrap: normal;
white-space: normal;
text-align: left;
}
.navmenu-item-a-inline {
padding: 0 !important;
text-transform: uppercase;
}
.navmenu-link {
display: none;
}
}
.navmenu-meganav.navmenu-meganav--desktop .navmenu-brands-list .navmenu-item-text {
display: inline-block;
max-width: 85%;
vertical-align: middle;
}
.site-mobile-nav {
.navmenu-brands-list{
width: 100%;
margin-right: 0;
margin-left: 0;
/*
padding: 0 20px;
text-align: center;
.navmenu-item-text {
padding: 0.8125rem 0.5625rem;
}*/
.navmenu-item-text,
.navmenu-item-desc,
.navmenu-item-logo {
display: none;
}
}
.navmenu-meganav--image-container {
display: none;
}
}
/*
************************************************************
MEGA MENU tweaks :: END
************************************************************
*/
{% comment %}
@param blocks Array
Array of blocks to iterate menus through
@param depth Number
The starting depth to use for the class names.
@param max_depth Number
The maximum depth to traverse.
@param meganav_has_triggers Bool
Adds in triggers to open meganav items
@param submenu_arrows Bool
Option to display dropdown arrows
{% endcomment %}
{%- capture navmenu_classes -%}
navmenu
navmenu-depth-{{ depth }}
navmenu-meganav-items
{%- endcapture -%}
<ul class="{{ navmenu_classes | strip_newlines }}">
{% for block in blocks %}
{% assign meganav_trigger = block.settings.meganav_trigger | handle | strip %}
{% if link.handle == meganav_trigger %}
{% if block.settings.image_1 or block.settings.image_2 %}
{% if block.settings.position_1 == block.settings.position_2 %}
<div
class="
navmenu-meganav--image-container
navmenu-meganav--image-{{ block.settings.position_1 }}
"
>
{% endif %}
{%
include 'meganav-image-block'
id: 1,
settings: block.settings
%}
{%
include 'meganav-image-block'
id: 2,
settings: block.settings
%}
{% if block.settings.position_1 == block.settings.position_2 %}
</div>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% for link in link.links %}
{% assign d = depth | plus: 1 %}
{% assign nav_item_count = 'navmenu-item-count-' %}
{% if link.links.size > 4 %}
{% assign nav_item_count = nav_item_count | append: '5-up' %}
{% else %}
{% assign nav_item_count = nav_item_count | append: link.links.size %}
{% endif %}
{%- capture navmenu_item_classes -%}
navmenu-item
navmenu-item-parent
{{ nav_item_count }}
navmenu-id-{{ link.title | handle }}
navmenu-meganav-item
{%- endcapture -%}
{% comment %}
START MAXX CHANGES (10-12/12/20118)
{% endcomment %}
{% if link.links.size == 0 %}
<div class="navmenu-brands-list">
{% assign nav_brands_list_started = 1 %}
{% elsif link.links.size > 0 and nav_brands_list_started %}
</div>
{% endif %}
<li
class="{{ navmenu_item_classes | strip_newlines }}"
{% if meganav_has_triggers and link.links.size > 0 %}data-navmenu-trigger{% endif %}
{{ block.shopify_attributes }}>
{% assign menu_url_arr = link.url | split: '/' %}
{% if link.links.size == 0 and collections[ menu_url_arr[2] ] %}
<span class="navmenu-item-logo">
{% if collections[ menu_url_arr[2] ].image %}
<a href="{{link.url}}" pan class="navmenu-item-logo-a">
<img src="{{ collections[ menu_url_arr[2] ].image | img_url: 'medium' }}"/>
</a>
{% endif %}
</span>
<a class="navmenu-link" href="{{link.url}}">
{{ link.title }}
</a>
{% endif %}
<span class="navmenu-item-text navmenu-link-parent">
{{ link.title }}
{% if link.links.size == 0 and collections[ menu_url_arr[2] ] %}
<span class="navmenu-item-desc">
{{ collections[ menu_url_arr[2] ].description | strip_html | truncate: 112 }}
<a href="{{link.url}}" pan class="navmenu-item-a-inline">
Shop {{collections[ menu_url_arr[2] ].title}}
</a>
</span>
{% endif %}
{% comment %}
END MAXX CHANGES (10-12/12/20118)
{% endcomment %}
{% if submenu_arrows and link.links.size > 0 %}
<span class="navmenu-icon navmenu-icon-depth-{{ depth }}">
{% include 'icon-chevron-down-small' %}
</span>
{% endif %}
</span>
{%
include 'navmenu',
menu: link,
depth: d,
max_depth: 4,
is_submenu: true,
has_triggers: true,
submenu_arrows: true,
aria_expanded: true
%}
{% endfor %}
</ul>