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
- Access your themes section
- Open the Loft theme code
- 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 few lines of code in two files (loft-nav.liquid, timber.scss.liquid)
Do the following steps:
- Search for the "Snippets" folder
- Open the "loft-nav.liquid" file
- On line 48, move the <a> tag and all of its contents into the button element that starts on line 50 (next line down ideally). Then change it's "href" attribute to "#" (a hashtag).
- Repeat step 3 on lines 154-158
- Click "Save"
- Search for the "Assets" folder
- Open the "timber.scss.liquid" file
- On line 2330, in the .mobile-nav__link class, remove the following block of code
- On line 2336, delete the .mobile-nav__toggle class and the .mobile-nav__toggle-open class (essentially deleting from 2336 to 2345)
- Click "Save"
Note: as you delete, code will shifts, so the line numbers are just approximate