Skip to content

Instantly share code, notes, and snippets.

@kyledurand
Created April 6, 2015 17:17
Show Gist options
  • Save kyledurand/f13a2c767817199414d0 to your computer and use it in GitHub Desktop.
Save kyledurand/f13a2c767817199414d0 to your computer and use it in GitHub Desktop.
Shopify Minimal Theme Sub Navigation (Nested) Menus

How do enable sub menus in the Minimal theme

  1. Replace the site-nav.liquid snippet with the one below.
  2. Add the css below to the bottom of styles.scss.liquid
  3. If you haven't already, create your sub linklists by folowing the same procedure as mentioned in this doc
  4. Result:

Alt text

<ul class="horizontal unstyled clearfix {% if settings.navigation_alignment == "right" %}fr{% endif %}">
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handle %}
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
<li class="dropdown">
<a href="{{ link.url }}" {% if link.active %} class="current"{% endif %}>
{{ link.title }}
<i class="fa fa-angle-down"></i>
</a>
<ul class="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="dropdown">
<a href="{{ child_link.url }}" {% if child_link.active %} class="current"{% endif %}>
{{ child_link.title }}
<i class="fa fa-angle-right"></i>
</a>
<ul class="dropdown">
{% 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>
<a href="{{ child_link.url }}" {% if child_link.active %} class="current"{% endif %}>{{ child_link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li>
{{ link.title | link_to: link.url }}
</li>
{% endif %}
{% endfor %}
</ul>
nav.main ul > li > ul > li.dropdown {
position: relative;
ul.dropdown {
left: 175px; // if the gutters or any of the menu padding has been altered then this and the 'top' value below might have to be altered to match.
top: -6px;
position: absolute;
opacity: 0;
display: none;
// the remainder is taken from line 302. Unfortunately we can't @extend nested styles.
background: {{ settings.nav_dropdown_background_color }};
list-style: none outside none;
padding: 5px 15px; display: none;
min-width: 180px;
z-index: 99999;
border: 1px solid {{ settings.border_color }};
}
}
@cristinaurr
Copy link

help i do not find the styles.scss.liquid to make the step 2

@jason3w
Copy link

jason3w commented May 21, 2016

Can't get this to work either. Is it active still?
Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment