Creating mega navigation menus

With a dropdown menu set up, navigate to the theme editor's Header settings (Customize > Header).

Select [+] Add mega navigation to begin building your mega navigation menu.

The Mega navigation trigger identifies the menu item that the feature will stem from.

Choose the menu item with the nested dropdown and add its title to the Mega navigation trigger. In this example, 'Products' is the menu item that is going to be a mega navigation's trigger, so this title is added to the trigger field.

Include custom images

The mega navigation also includes promotional Custom image blocks to highlight certain promotions.

Click Select image, then add the desired Text and Link.

Using the Position dropdown, specify how this custom image will display with your mega navigation links. There are two options, positioning the Custom image before or after the menu columns:

• First column
• Last column

Customize the Size of the Custom image block by using the dropdown. There are three options:

• Small
• Medium
• Large 

With a dropdown menu set up, navigate to the theme editor's Header settings (Customize > Header).

Scroll to the very bottom and select [+] Add mega-nav.

Choose the menu item with the nested dropdown and add its title to the Mega navigation trigger. In this example, 'Catalog' is the menu item that is going to be a mega navigation's trigger, so this title is added to the trigger field.

Include images

Use the optional Image 1 and Image 2 settings to add media to your mega navigation menu.

Click Select image to locate and apply the image(s).

Use the Text and Link fields to add copy and link your customers to specific pages.

Adjust the Position and Size dropdowns to control the position and size of the images in the mega navigation. 

The Atlantic theme's mega navigation menus are largely built in the Navigation admin. The theme essentially looks for any dropdown that has each 2nd tier item paired with at least one 3rd tier item.

In the example image below, while 'Bikes' and 'Clothing' both have 3rd-tier items nested below, the 2nd-tier item 'Bike Racks' is missing the necessary nested item to activate the mega navigation.

To complete this mega navigation, at least one nested item would need to be added to the Bike Racks tier.

Adding or removing items from the menu can result in a 2nd-tier item missing a 3rd-tier item. Looks for any solitary 2nd-tier items if the mega navigation is absent.

Adjust layout in the theme editor

Go to the theme editor by selecting Customize in the Online Store.

In Header under Sections, select One column or Two column from the Sub-column layout dropdown.

With a dropdown menu set up, navigate to the theme editor's Header settings (Customize > Header).

Scroll to the very bottom and you will see an option to Add mega-nav.

Choose the menu item with the nested dropdown and add its title to the Mega navigation trigger. In this example, 'Catalog' is the menu item that is going to be a mega navigation's trigger, so this title is added to the trigger field. 

The approach for creating mega navigation menus for Editions has changed in more recent releases. To follow these instructions, confirm you are using the latest version or update your theme.

With a dropdown menu set up, navigate to the theme editor's Header settings (Customize > Header).

Scroll to the very bottom and you will see an option to Add mega-navigation.

Choose the menu item with the nested dropdown and add its title to the Mega navigation trigger. In this example, 'Catalog' is the menu item that is going to be a mega navigation's trigger, so this title is added to the trigger field.

With a dropdown menu set up, navigate to the theme editor's Header settings (Customize > Header).

Scroll to the bottom and you will see an option to Add mega-nav.

Choose the menu item with the nested dropdown and add its title to the Mega navigation trigger. In this image example, 'Shop' is the menu item that is going to be a mega navigation's trigger, so this title is added to the trigger field.

Display collection images in the mega navigation

With the Display collection images setting enabled, Handy will draw the collection images from the Products > Collections admin. At least one collection must be present in the mega navigation's links for the image to appear.

With a dropdown menu set up, navigate to the theme editor's Header settings (Customize > Header).

Scroll to the very bottom and you will see an option to Add mega-nav.

Choose the menu item with the nested dropdown and add its title to the Mega navigation trigger. In this image example, 'Shop' is the menu item that is going to be a mega navigation's trigger, so this title is added to the trigger field.

Display images for included collections

If collections are included among these menu items, you can enable Show images for top level collections. This setting draws in the Collection image (assigned in the Collections admin) to display in the Mega navigation.

The appearance of these images can be fine-tuned through the Image aspect ratio selector. This select this dropdown to view the following options:

Uncropped:

• Natural (original image proportions)
• Short (4:3)
• Square (1:1)
• Tall (2:3)

Cropped:

• Short (4:3)
• Square (1:1)
• Tall (2:3)

Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront. 

You can see how it will appear by selecting the Theme actions button on the bottom left corner, then clicking Preview theme. 

Minimum width for image sizing

The width for the images included here reflect the length of the menu items. If you need the images to be uniform in width, use the Promo area minimum width to increase the text space and image width together.

Add promotional blocks

Mega navigation menus occupy a substantial area of the browser window when activated, so consider adding a Promotional block to highlight something special.

There are two options for Position: Last column or First column. You can configure the promotion block to appear to the right side of the menu (Last column) or the left side (First column).

By default, the promo block will be limited to a single column, but this can be expanded using the Promo block columns selector. Use this to feature up to 3 columns of promotional content.

There will be placeholder content here by default, but you can scroll down to the Promo blocks to add your own image(s) and text before configuring these settings.

Just as the width of the menu items can be customized, the width of the promotional block column(s) can be controlled using the Promo area minimum width selector. 

Just like the collection images, the appearance of the promotional block images can be fine-tuned through the Image aspect ratio selector. This select this dropdown to view the following options:

Uncropped:

• Natural (original image proportions)
• Short (4:3)
• Square (1:1)
• Tall (2:3)

Cropped:

• Short (4:3)
• Square (1:1)
• Tall (2:3)

Using an Uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.

How the text content and image are positioned can be customized using the Promo text layout to select one of the following options:

• Above left
• Above center
• Above right
• Below left
• Below center
• Below right

The Overlay feature offers an alternative approach for displaying text with your image. When enabled, this combines the image and text and adds a semi-transparent color overlay to contrast.

Select Show overlay to enable, then choose how the text is positioned and aligned by using the Overlay text layout selector.

You can also customize the Color by clicking on the black rectangle, then the Opacity by selecting the slider below it. The Text color can be customized here, too.

Promo blocks

Upload an image or select one from your library to feature in the promo block. Then add copy for the Heading and Text fields, and add a Link for the block to direct customers to the relevant page.

Repeat for up to three promo blocks.