How to find these settings...
- Online Store
- Customize (Theme Editor)
- Header
- NAVIGATION
Create and edit menus in the navigation section or your admin: Left Column > Online Store > Navigation. By default, Shopify themes will use the Main Menu, but you can choose any to use in the Header section.
Recommended reading
In this section...
Menu Structure
The main menu has a few dynamic options that will grow with the size of your menu. The first level will display next to the Header Logo. If this level grows wider than the space available, the menu will convert to the mobile styling.
As you add nested menu items, the drop down styling will dynamically change. A second level menu item will result in a simple dropdown menu:
As you continue to add second level menu items, your drop down menu will grow. The next option is to add a third level menu item. This will add to the existing drop down menu, but new dynamic styling rules will start to display:
Once a 3rd second level menu item has been added, and at least one of them contains a third level menu item, the main navigation dropdown will convert to the 'Mega' navigation:
Menu Options
The default menu is the 'Main Menu' that is one of the menus within the admin that cannot be deleted. External links will open in a new tab/window
Link size
The slider provides a font size of 14px (default), 16px, 18px, 20px or 22px. The default size is 14px
Uppercase headings
Set the 2nd level headers to be uppercased
Position
The menu can appear next to the logo, centered, or to the far right of the section
Enable sticky header
Pin the navigation bar to the top of the page when scrolling
Menu Image
The 'Mega' menu contains a single image that corresponds to the first level menu item if it is linked to a collection. You will see 2 options for the image:
Show image
If you do not want to display an image, simply uncheck 'Show image'
Show first product image
If the menu item is a collection, it will display the available collection image first. If no image is available, it will use the first product image. You can override this by checking 'Use first product image'.
Show border
Display a border to separate the Announcement Bar
* NOTE: May not be available on all sections, blocks or templates