1-instructions.md

Nested / Sub Dropdown Menu for Any Timberized Shopify theme

1. Replace site-nav.liquid with the snippet below.
2. Add the styles below to timber.scss.liquid.
3. Go make popcorn.
4. Check your homepage to see if this has worked.
5. It didn't work.
6. Eat the popcorn and try to figure out what went wrong.

Important

If this modification breaks your theme, chances are the issues lies with these two lines: border: 1px solid $colorBorder; background-color: $colorBody;

Replace these sass variables with hex colours. i.e. border: 1px solid #ccc; background-color: #fff;

site-nav.liquid

<ul class="site-nav" id="accessibleNav">
  {% unless linklists.main-menu.links.first.url == '/' %}
  <li class="large--hide"><a href="/">Home</a></li>
  {% endunless %}
  {% for link in linklists.main-menu.links %}
  {% assign child_list_handle = link.title | handleize %}
  {% if linklists[child_list_handle].links != blank %}
  <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
    <a href="{{ link.url }}">
      {{ link.title }}
      <span class="icon-fallback-text">
        <span class="icon icon-arrow-down" aria-hidden="true"></span>
      </span>
    </a>
    <ul class="site-nav--dropdown">
      {% for child_link in linklists[child_list_handle].links %}
      {% assign grand_child_list_handle = child_link.title | handle %}
      {% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %}
      <li class="{% if childlink.active %}site-nav--active{% endif %} grand">
        <a href="{{ child_link.url }}">
          {{ child_link.title }}
          <span class="icon-fallback-text">
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="site-nav--dropdown--sub">
          {% for grand_child_link in linklists[grand_child_list_handle].links %}
          <li>
            {{ grand_child_link.title | link_to: grand_child_link.url }}
          </li>
          {% endfor %}
        </ul>
      </li>
      {% else %}
      <li>
        {{ child_link.title | link_to: child_link.url }}
      </li>
      {% endif %}
      {% endfor %}
    </ul>
  </li>
  {% else %}
  <li {% if link.active %}class="site-nav--active"{% endif %}>
    <a href="{{ link.url }}">{{ link.title }}</a>
  </li>
  {% endif %}
  {% endfor %}

  {% if shop.customer_accounts_enabled %}
  {% if customer %}
  <li class="customer-navlink large--hide"><a href="/account">View Account</a></li>
  <li class="customer-navlink large--hide">{{ 'Log out' | customer_logout_link }}</li>
  {% else %}
  <li class="customer-navlink large--hide">{{ 'Sign in' | customer_login_link }}</li>
  {% if shop.customer_accounts_optional %}
  <li class="customer-navlink large--hide">{{ 'Create an Account' | customer_register_link }}</li>
  {% endif %}
  {% endif %}
  {% endif %}
</ul>

timber.scss.liquid

.site-nav--dropdown{
  overflow:initial;
}

.grand .icon-arrow-down{
  -ms-transform: rotate(-90deg); /* IE 9 */      
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

.site-nav li.grand{
  position:relative;
}

.site-nav--dropdown--sub{
  position:absolute; 
  display:none; 
  width: 160px;
  right: -160px;
  top: -1px;
  border: 1px solid $colorBorder;
  background-color: $colorBody;
}

.site-nav li.grand:hover > .site-nav--dropdown--sub{
  display:block;
}