Disable mega menus on mobile

Overview Each mega menu you create in Meteor technically has two versions; one for desktop and one for mobile. The desktop version of each mega menu will use the template you've selected in the app, while the mobile version of each mega menu will use a single mobile-only template. This mobile-only template is text based and is optimized for use on touchscreen devices. There are certain situations where you may want to disable the app's mega menus on the mobile version of the store, while continuing to use the app's mega menus for the desktop version of the store. Some Shopify themes include mobile menus that happen to provide more functionality than the ones that are included with Meteor, and in these cases it might be best to rely on the theme's native mobile menus instead. Steps to disable Find your theme's mobile breakpoint In order to disable the app's mega menus on the mobile version of your store, the first step is to figure your theme's mobile breakpoint. There are a variety of different ways to do this, but the most common is to use your browser's built-in dev tools. For browsers like Chrome and Firefox you can simply right-click on a webpage and select 'Inspect' to launch dev tools. In dev tools, you can use a responsive mode to view what the store looks like on different screen sizes. To find the theme's mobile breakpoint, simply resize the page window until you see the theme's desktop navigation go away and switch over to use the mobile navigation instead. Common breakpoints The code for each Shopify theme will vary, so your theme's mobile breakpoint may be unique, but we've provided some common breakpoints below: 749px 768px 990px 1024px Use the 'Disable at Width' setting in the app Once you have found your theme's mobile breakpoint, you can add it into the app's settings to disable the mobile menus. You can find the 'Disable at Width' setting on the app's general settings page: https://meteor.heliumdev.com/settings Simply type in your theme's mobile breakpoint into the 'Disable at Width' field and then click the 'Save' button. Once done, the app's mobile menus will be disabled, while the desktop mega menus will be left as-is. Questions or concerns? Please contact our support team via chat or email and we'll be happy to assist!

Still puzzling over something?

Custom CSS

Supported themes

Liquid files

Duplicate your theme

Display images for 'Page' menu items