max-kk
12/12/2018 - 5:32 PM

diabeticsockshop.myshopify.com MEGA MENU

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>