How to: navigate to sub-menus by clicking the linkname instead of the right arrow on the mobile nav

This guide will help you to modify the mobile nav, so that you can click the link name in order to see it's children (versus clicking the right side arrow).

Note: This guide is written based on the latest version of Loft

1. Access your themes section
2. Open the Loft theme code
3. Edit code

1. Access your themes section

Login to your Shopify admin, and then click “Online Store” (on the left side of the admin). This takes you to the “themes” area of your Shopify store.

Example themes section

2. Open the Loft theme code

Next, click the button that says “Actions” - followed by “Edit code” which will load the live code editor. It consists of a left hand sidebar, which lists all the files on Loft, along with a right hand code editing panel.

Shopify code editor

3. Edit code

You need to modify a couple of lines of code inside of your theme.js.liquid file.

Do the following steps:

theme.js.liquid

1. Search for the "Assets" folder
2. Open the "theme.js.liquid" file

3. Search the file (ctrl + f) for the following line of code:

$(this._selectors.mobileNavHasSublist + ' [type="button"]').click(function (e) {

Change the above line to

$(this._selectors.mobileNavHasSublist).click(function (e) {

Right below this line, add the following:

e.preventDefault();

The code block should now be as follows:

$(this._selectors.mobileNavHasSublist).click(function (e) { 
      e.preventDefault();                   
      var $closest_li = $(this).closest('li');
      var div_id = $closest_li.attr('id');
      $closest_li.find('h3').addClass("active")
      $closest_li.find('span').addClass("active")
      div_id = '#' + div_id.substring(0, div_id.lastIndexOf('-')) + '-mnav';
      self._swapInNav($(div_id));
});

loft-nav.liquid

Find the following block of code

<div class="mobile-nav__has-sublist">
  <div class="mobile-nav__toggle">
    <button type="button" class="icon-fallback-text mobile-nav__toggle-open">
      <span class="mobile-nav-arrow" aria-hidden="true">{% include 'icon_chevron' %}</span>
      <span class="fallback-text">Open</span> 
    </button>
    <button type="button" class="icon-fallback-text mobile-nav__toggle-close">
      <span class="mobile-nav-arrow" aria-hidden="true">{% include 'icon_chevron' %}</span> 
      <span class="fallback-text">Go Back</span> 
    </button> 
  </div> 
</div>

Remove the following from the first line of the block

class="mobile-nav__has-sublist"