Navigation: Force mobile navigation

If you'd like to force your site to always use the mobile navigation (hamburger menu version), then you can apply this modification. 

Please note this is an advanced code change. Be sure to make a duplicate of your theme before starting.

Step 1 - Modify assets/shop.js

https://myshopify.com/admin/themes/current?key=assets/shop.js.liquid

Use the Find feature (1) in the right pane where the code is: Command-F on Mac or Control-F in Windows.

Search for:

pipeline.detectNav = function

Then find the two lines highlighted below (2):

You will be reversing these classes (only the first section):

Original - Change from:

    $('.site-header, .info-bar').addClass('showDesktop');
    $('.site-header, .info-bar').removeClass('showMobile');

New - Change to:

    $('.site-header, .info-bar').addClass('showMobile');
    $('.site-header, .info-bar').removeClass('showDesktop');

Save the file.


If you need to undo the changes, reverse the steps used above or refer back to your duplicate/backup theme.

Still need help? Contact Us Contact Us