Navigation menu

With the Charge theme, it is possible to use the different dropdown types of the top menu. You can show both simple and mega menus at the same time.

You just have to specify the names of items in the Megamenu items name or Small menu items name fields, comma-separated. The main Dropdown menu type option will be ignored in this way for listed items.

Example:

You want to show the mega menu for Arrivals or Best collections, but still show the small menu for Faq or Services. So you have to enter the Faq, Services names in the Small menu items names field.

Note: You can still use the option Dropdown menu type for most menu items and list some items to change their dropdown type separately.

To start working with menu dropdown content, go Header section - Dropdown content.

Here it is possible to:

• Enable/disable the display of dropdown content. 
• Remove the dropdown menu items. Note: the enabled option allows for adding the banner images or collection list to the dropdown in different menus.
• Choose the alignment for items. The content will be vertically aligned, creating visual interest.
• Select the image for the banner. You can choose a product image and paste the product link in the Image link field.
• Specify the title for the image.
• Insert the image link.
• Pick up collections to show in the dropdown content. 
• Add the link to the collection list.
• Set the items' width.

Since the 1.7.0 release, we have added the possibility to show the product list in the dropdown menu. In the Header, you should press the Add block button and choose the Product list. 

Then it will be possible for you to configure the Product list settings:

• Remove menu links to remove menu items and show the Image banner or Collection list in the dropdown.
• Select collection products.
• Set the maximum number of products to show in the block.
• Set the item's width.
• Set the index of the parent-item menu. (Top-level menu)
• Add a link to the collection list.
• Switch the "View all" appearance between the Button and Text link.
• Show product price, badge, and outline border.

Now let's discuss the different dropdowns in the navigation menu available with the Charge theme.

Before you start adding, it is important to remember:

To show menus only with a banner or a collection list in the dropdown menu content, the menu must include at least one item that could be removed using the config option Remove menu links.

Show the banner images in the dropdown content

Use the Dropdown content of the Header section that is available only for items with a Megamenu dropdown type. First, you have to check the Remove menu links checkbox to remove menu links. Then choose the banner image and set set index of the parent item menu to apply this change. That's the result below.

Show only product images with links to the product pages

Show the collection list between the banner images

Use the Dropdown content of the Header section. You have to use the Index of the parent-item menu. (Top-level menu) field. You have to add an Image banner and select collections for a specific parent item. Then, for the same parent item, you can add another Image banner. That's the result below.

or place items in the following order:

Using the advanced navigation features of the Charge theme, you can create various dropdown content designs according to your store's needs. For instance, you can:

Show only the collection list in the dropdown menu

To add a menu like this, do as follows:

• Stay on the Homepage - Header area. Choose a Mega menu as a dropdown menu type. 
• Specify the mega menu items' names. You have to enter the name of the menu to which you want to add a collection list dropdown.
• Select the Show collection icon and then set its width.
• Click on the Dropdown block and check the Remove menu links checkbox first.
• Please enter an index of the parent-item menu.  
• Select collections.
• Set the item's width.

Show dropdown menu links with the product images

Here you can see the header section and dropdown content in full width.

Show the collection image in the row

Since the 1.6 release, we've added the Show collection image checkbox for small menu settings. You have to enable it to get the next result.

Show menu links and the collection list

Note: this menu is available only for items with the Megamenu dropdown type. 

Stay on the Homepage - Header area and do as follows:

• Choose a Mega menu as a dropdown menu type. 
• Specify the mega menu items' names. You have to enter the name of the menu to which you want to add a collection list dropdown.
• Select the Show collection icon and then set its width.
• Add the Dropdown content block. You can press the Add Block button in the Header and select the dropdown content.
• Enter an index of the parent-item menu.  
• Select collections.
• Set the item's width.