Simple Mobile Menu for Shopify

Do you need to add a mobile menu to your shopify theme? This is a pretty easy process when done correctly. In shopify go to your theme.liquid. In there you will want to look for some code that looks like this (might be slightly different depending on your theme)

<!-- START NAV -->
            <nav>
			<!-- START ACTIVE LINK CLASS -->
            {% capture active_url %}
                {% if template == "index" %}/
                    {% elsif template == "collection" %}/collections/{{ collection.handle }}
                    {% elsif template == "product" %}
                {% if collection %}/collections/{{ collection.handle }}
                    {% endif %}/products/{{ product.handle }}
                    {% elsif template == "page" %}/pages/{{ page.handle }}
                    {% elsif template == "blog" %}/blogs/{{ blog.handle }}
                    {% elsif template == "cart" %}/cart{% elsif template == "search" %}/search
                {% endif %}
            {% endcapture %}
            <div class="nav-wrap clearfix">
            <ul id="nav" class="sf-menu clearfix">
              {% for link in linklists.main-menu.links %}
              <li>
                <a href="{{ link.url }}">{{ link.title }}</a>
                {% capture child_list_handle %}{{ link.title | handleize }}{% endcapture %}
                {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
                <ul>
                  {% for l in linklists[child_list_handle].links %}
                  <li><a href="{{ l.url }}">{{ l.title }}</a></li>
                  {% endfor %}
                </ul>
                {% endif %}
              </li>
              {% endfor %}
            </ul>

Under this add:

            <div id="custom-navigation" class="custom-navigation mobile-menu">
              <ul class="custom-sublist" style="display: block;">
                <li class="main-submenu"> <a href="#" class="collapser tab-icon collArrow">Menu</a>  <a href="#" class="collapser plus">+</a>
              		{% for link in linklists.main-menu.links %}
              		<ul style="display:none">
                      <li class="menu">
                		<a href="{{ link.url }}">{{ link.title }}</a>
                		{% capture child_list_handle %}{{ link.title | handleize }}{% endcapture %}
                		{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
                        	<a href="#" class="collapser plus">+</a>
                			<ul class="topboder" style="display: none;">
                  				{% for l in linklists[child_list_handle].links %}
                  				<li><a href="{{ l.url }}">{{ l.title }}</a></li>
                  				{% endfor %}
                			</ul>
                			{% endif %}
              			</li>
                  	</ul>
              		{% endfor %}
                </li>
              </ul>
            </div>

Before the body tag drop in this script. I believe all shopify themes use jQuery, so you don’t need to worry about the script.

<script type="text/javascript">
$('.collapser').click(function() {
  var parent = $(this).closest("li");
  if(parent.hasClass('open')) {
      parent.removeClass('open');
      if(parent.hasClass('main-submenu')) {
        parent.children('a.plus').removeClass('active').text('+');
      }
      if($(this).hasClass('plus')) {
          $(this).removeClass('active').text('+');
      }
      parent.children('ul').hide('fast');
  } else {
      parent.addClass('open');
      if(parent.hasClass('main-submenu')) {
        parent.children('a.plus').addClass('active').text('-');
      }
      if($(this).hasClass('plus')) {
          $(this).addClass('active').text('-');

      }
      parent.children('ul').show('fast');
  }
});
</script>

Now you are going to need to style your mobile menu. Here is a basic structure written in Sass

.mobile-menu {display:none} /* Hidden for none mobile */

@media only screen and (max-width: 768px) { /* Start Mobile */
        #nav {
		display:none !important;
		margin-left: 0px;
		li {
			@include width-90;
			text-align: center;
			float:none;
			a{
				@include width-90;
				text-align: center;
			}
		}
	}
	.mobile-menu {
		display: block !important;
		text-align: left;
		ul {
			border-top:1px solid #ccc;
			li {
			border-bottom:1px solid #ccc;
				a {
					@include font-size(1);
					padding-left:20px;
				}
				ul li ul li {
					background:#e3e8ff;
				}
				a.plus {
					float:right;
					padding-right:20px;
				}
			}
		}
	}
}