Overview
The app embed for Meteor Mega Menu (found within Shopify's theme editor) allows you to enable/disable the app on a theme. It also includes a variety of customization settings.
Customization options
Desktop navigation styling
Caret style
Choose between an outline style or filled-in down arrow icon to display next to navigation items when there is a mega menu that can be opened
Link spacing (horizontal)
Adjust the horizontal spacing between each navigation item (measured in pixels)
Link padding (vertical)
Adjust the vertical spacing above and below the navigation bar (measured in pixels)
Text alignment
Choose between left, right, and center alignment for the links within the navigation bar.
Font size (px)
Adjust the font size of the main navigation items (measured in pixels)
Font weight
Adjust the font weight of the main navigation items. Note that some fonts do not support all of the different weight options
Text transform
Choose to have the navigation items be all lowercase, all uppercase, or only the first letter capitalized. Choosing none will make the text appear exactly as entered in the app's menu editor
Desktop mega menus
Center menus in viewport
Choose to have all of the mega menus open in the center of the screen as opposed to opening directly under the associated navigation item
Vertical offset
Adjust the space between the navigation item and the top of the mega menu (measured in pixels)
Display trigger
Choose to have the mega menus open when the navigation item is hovered over or only when the navigation item is clicked
Display delay
Adjust the amount of time before the mega menu opens after being triggered
Display animation
Choose to add an opening animation to the mega menus when they are triggered
Disable desktop menu
Choose to disable the app only on desktop, while still allowing the app to work on mobile
Mobile mega menus
Mobile breakpoint
Adjust the pixel width of the viewport where the app changes from using desktop menus to using mobile menus. When the value is set to zero, the app will attempt to automatically detect the breakpoint
Disable mobile menu
Choose to disable the app only on mobile, while still allowing the app to work on desktop
Advanced settings
Desktop nav selector
Mobile nav selector
For more information about nav selectors, visit our guide: Navigation selectors