> For the complete documentation index, see [llms.txt](https://vodoma-docs.boostheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vodoma-docs.boostheme.com/static-sections/powerful-mobile-megamenu/old-powerful-mobile-megamenu.md).

# Powerful Mobile Megamenu ( version 2.2.1 or older )

Build your main navigation easily by drag & drop the menu items. This menu is shown on the mobile screen.

{% hint style="info" %}
This guide only matches with version 2.2.1 or older. If you want are using version 3.0.0 or newer, please refer to [the new guide](/static-sections/powerful-mobile-megamenu.md).
{% endhint %}

## Open Powerful Mobile Megamenu section

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful Mobile Megamenu** section.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLTu0QHhrZ8VPTXU4y%2F-MSLUgnlkUd2ehL8QTDm%2Fmobile-megamenu-open-section.jpeg?alt=media\&token=d949310f-1b90-4975-9e32-83e7c91fba00)

{% hint style="warning" %}
To see the changes in this section, you need to adjust the Theme Editor Preview to the mobile screen. Please refer to the below image.
{% endhint %}

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLTu0QHhrZ8VPTXU4y%2F-MSLUzjjRQg1foTVsBcL%2Fmobile-megamenu-screen.jpeg?alt=media\&token=d50932cf-2143-4e1e-8d6d-bc3a59546092)

## Global color settings

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLV1qJN0V0eNIkdcsk%2F-MSLVIppUcrGq-JPBwWW%2Fmobile-megamenu-global-color-settings.jpeg?alt=media\&token=ce438964-f7d4-4e6c-8655-e966f6137156)

Configure colors for Level 1, 2, 3 items, label, and the text overlay image. In an item, the global color settings may be overridden by its own color settings.

## Global font size settings

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLV1qJN0V0eNIkdcsk%2F-MSLVXASRAV1WyYLP18r%2Fmobile-megamenu-global-font-size-settings.jpeg?alt=media\&token=1f5afade-0b50-41c3-8cbb-c9ee51c3de3e)

Configure font size for Level 1, 2, 3 items, and label.

## Menu item types

Mobile Megamenu is built based on the menu item types. Our theme provides 5 menu item types that will help you build the menu easily. To add a menu, click the **Add content** button, then choose an item type you want to add.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLVa7DBA46KaZia7Bw%2F-MSLWJDOw2lI2Q8kDdWk%2Fmobile-megamenu-add-item.jpeg?alt=media\&token=ed453ccd-dfb3-4176-af0d-a54733ea427c)

## 1. Top items by link list

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLWecIh55bqnnO75TN%2F-MSLWlw2u3lEt9elo3Dh%2Fmobile-megamenu-top-items-by-link-list.jpeg?alt=media\&token=c1dd4baf-d476-4921-a000-c0c2cb27b7dd)

This is a level item type. This item type will help you display a hierarchy of menu items quickly. This is a special item, it's not a parent, also a child item. An item with this type can render lots of level 1 menu items.

### GENERAL SETTINGS

* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Pick a Shopify Navigation:** pick a Shopify Navigation ( Link list ) to display top and child items.
* **Children style:** specify a style to display child items.

![Style 1](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLWecIh55bqnnO75TN%2F-MSLXljVEFBpYBmdedJN%2Fmobile-megamenu-level-style1.jpeg?alt=media\&token=0ede20e9-2cd5-461f-8322-8d07aa899d87)

![Style 2](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLWecIh55bqnnO75TN%2F-MSLXsyEVrQZVqnvtnvj%2Fmobile-megamenu-level-style2.jpeg?alt=media\&token=b50d5b86-4135-4c51-93cd-649ee5c47b8c)

### LAYOUT SETTINGS

* **Show the link list in 2 Columns:** display child items in 2 columns. Only work on the children style 1.

### COLORS

* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Level 1:** configure color for level 1 items.
* **Level 2:** configure color for level 2 items.
* **Level 3:** configure color for level 3 items.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.

## 2. Parent( Level 1 ) item

This is the top-level item. All other child item types will be shown in a drop-down of this item. So you have to put it before child items on the Theme Editor page.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLVa7DBA46KaZia7Bw%2F-MSLVyiD2aNAxmU0SI4C%2Fmobile-megamenu-parent-item.jpeg?alt=media\&token=286c871b-9415-4a60-9128-b31ccc0a3315)

### GENERAL SETTINGS

* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips.md#add-a-label-icon-to-a-text) to add a label, icon to the title. The title will be displayed as a level 1 menu item.
* **Title URL:** add a link to the menu item.

### COLORS

* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 1):** configure color for the title.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.

### FOR DEVELOPER

* **Custom HTML class:** add your custom HTML class.

## 3. Child item - Link list

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLZ5xGUQYcTtUpnaMk%2F-MSLZD6wobZdc06Ac_X4%2Fmobile-megamenu-link-list.jpeg?alt=media\&token=2c478566-1be1-4bb0-9588-01eb8c692ff5)

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu/old-powerful-mobile-megamenu.md#2-parent-level-1-item) in front of it.
{% endhint %}

### GENERAL SETTINGS

* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips.md#add-a-label-icon-to-a-text) to add a label, icon to the title. The title will be displayed as a level 2 menu item.
* **Title URL:** add a link to the title.
* **Pick a link list:** choose a link list to display it as level 3 menu items. Only display the top-level in the chosen link list.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSL_EAIivBX-raoAYdC%2F-MSL_ZocJ822yJixAtMW%2Fmobile-megamenu-link-list-settings.jpeg?alt=media\&token=87f9cc72-1e39-410f-9121-8ca961e1b331)

### LAYOUT SETTINGS

* **Item's width:** adjust the width of the menu item. There are 2 options: full or half.
* **Show the link list in 2 columns:** tick this checkbox to display the link list in 2 columns.

{% hint style="info" %}
Tips: If you want to display the link list in 2 columns, we recommend configuring the item's width to **full** to display the link list fine.
{% endhint %}

![The Item's width is set to "half"](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSL_EAIivBX-raoAYdC%2F-MSL_uI23OUouDsA9ONL%2Fmobile-megamenu-link-list-half.jpeg?alt=media\&token=fa1bd6a5-36e2-43f3-bf1d-b3d1f09e265d)

![Display the link list in 2 columns and the item's with is set to "full"](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSL_EAIivBX-raoAYdC%2F-MSL_z73vxJODllO1gm7%2Fmobile-megamenu-link-list-full.jpeg?alt=media\&token=55f8c9c5-2f22-495e-9deb-94a7f08e43c4)

### COLORS

* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 2 ):** configure color for the title.
* **Link list( Level 3 ):** configure color for the link list.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.

### **FOR DEVELOPER**

* **Custom HTML class:** add your custom HTML class.

## 4. Child item - Image

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MSLa6gKNO9SnUG7h1Lu%2F-MSLaJc913OwxVZw1qMU%2Fmobile-megamenu-image.jpeg?alt=media\&token=c67ec31e-a86b-46d3-ab1a-8ddbfd9475f4)

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu/old-powerful-mobile-megamenu.md#2-parent-level-1-item) in front of it.
{% endhint %}

### GENERAL SETTINGS

* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips.md#add-a-label-icon-to-a-text) to add a label, icon to the title. The title will be displayed as a level 2 menu item.
* Image: pick or upload your image.
* **The text overlay:** type your text to display override the image. This text will display as a level 3 menu item. So color and font size settings for the level 3 item will be applied to this text.
* **URL:** add a link to the title and image.

### LAYOUT SETTINGS

* **Item's width:** adjust the width of the menu item. There are 2 options: full or half.

### COLORS

* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 2 ):** configure color for the title.
* **Text overlay( Level 3 ):** configure color for text overlay.
* Text overlay background: configure background color for text overlay.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.

### **FOR DEVELOPER**

* **Custom HTML class:** add your custom HTML class.

## 5. Child item - Custom HTML

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu/old-powerful-mobile-megamenu.md#2-parent-level-1-item) in front of it.
{% endhint %}

### GENERAL SETTINGS

* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips.md#add-a-label-icon-to-a-text) to add a label, icon to the title. The title will be displayed as a level 2 menu item.
* **Title URL:** add a link to the title.
* **Your text or HTML:** type your text or HTML to display it as a level 3 menu item.

### LAYOUT SETTINGS

* **Item's width:** adjust the width of the menu item. There are 2 options: full or half.

### COLORS

* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 2 ):** configure color for the title.
* **Item text( Level 3 ):** configure color for the link list.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.

### **FOR DEVELOPER**

* **Custom HTML class:** add your custom HTML class.