App embed settings

An overview of the app settings that can be configured within Shopify's theme editor

Brett Shelley avatar
Written by Brett Shelley
Updated over a week ago

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

Did this answer your question?