Skip to content

Instantly share code, notes, and snippets.

@JWizerd
Last active January 27, 2023 12:49
Show Gist options
  • Save JWizerd/068d4b91ccf607e750718ecb32de2d36 to your computer and use it in GitHub Desktop.
Save JWizerd/068d4b91ccf607e750718ecb32de2d36 to your computer and use it in GitHub Desktop.
Split Navigation for Shopify Themes
<!--
use this snippet for template with split navigation, one on the left and one on the right.
this snippet expects that you have two link list / menus created 1 (main-left and main-right)
HOPE THIS HELPS SOMEBODY =)
-->
<div class="col-md-4 text-right hidden-xs hidden-sm">
<div class="site-header-nav hidden-xs hidden-sm">
{% if linklists.main-right.links.size > 0 %}
<ul class="nav-left" role="navigation">
{% for link in linklists.main-left.links %}
{% assign child_list_handle = link.title | handle %}
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
<li class="has-dropdown">
{{ link.title | link_to: link.url }}
<ul class="dropdown-menu">
{% for child_link in linklists[child_list_handle].links %}
<li>
{{ child_link.title | link_to: child_link.url }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href="{{ link.url }}" title="{{ link.title }}"{% if link.active %} class="active"{% endif %}>{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div><!--/.site-header-nav left-->
</div>
<div class="col-md-4 text-center">
{% if settings.use_logo %}
<a id="logo" href="/">
{{ 'logo.png' | asset_url | img_tag: shop.name }}
</a>
{% else %}
<h1 class="site-title"><a href="/">{{ shop.name }}</a></h1>
{% endif %}
</div>
<div class="col-md-4 text-left hidden-xs hidden-sm">
<div class="site-header-nav hidden-xs hidden-sm">
{% if linklists.main-right.links.size > 0 %}
<ul class="nav-right" role="navigation">
{% for link in linklists.main-right.links %}
{% assign child_list_handle = link.title | handle %}
{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
<li class="has-dropdown">
{{ link.title | link_to: link.url }}
<ul class="dropdown-menu">
{% for child_link in linklists[child_list_handle].links %}
<li>
{{ child_link.title | link_to: child_link.url }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href="{{ link.url }}" title="{{ link.title }}"{% if link.active %} class="active"{% endif %}>{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</div><!--/.site-header-nav right-->
</div>
@Cthrige
Copy link

Cthrige commented Jan 27, 2023

Any solution to this? @jaspbur78 @JWizerd

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