# Powerful Mobile Megamenu ( version tf-3.5 or older )

{% hint style="info" %}
This guide only matches with version tf-3.5 or older. If you want are using version tf-4.0 or newer, please refer to [the new guide](https://beloria-docs.boostheme.com/static-sections/powerful-mobile-megamenu-section).
{% endhint %}

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MReZnoSjxe7kHgnkcKP%2F-MReaJ0DBXf-edcV38O9%2Fmobile-megamenu.jpeg?alt=media\&token=59eb57c2-fab9-46c3-962d-6c3c4142f00b)

## 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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MReaOKJUptLgIItUFUK%2F-MRecQ-MDY4izm5U4_qs%2Fmobile-megamenu-open-section.jpeg?alt=media\&token=bd69dcdf-26e5-44be-8e19-77f1dd3b3069)

{% 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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRheqSzK8bcuoDvEqMR%2F-MRhgkR0G0gzH9QNk8t4%2Fmobile-megamenu-screen.jpeg?alt=media\&token=7167aa1d-565d-4266-bbd7-6d7162baea37)

## Global color settings

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRen96D1yfmZ_t3WOp7%2F-MRep6khPBBIyoBa5v3D%2Fmobile-megamenu-global-color-settings.jpeg?alt=media\&token=df1c7740-f613-45cb-b01d-345be0fdc1a3)

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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRepbujuyurATxsQgAW%2F-MReppxitUfkJo1qbyS4%2Fmobile-megamenu-global-font-size-settings.jpeg?alt=media\&token=0e8f04a4-326c-4e76-8e9c-e3f88163e428)

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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRecyglRS7fc97AbqNs%2F-MRedUa_aoOtqWxdyxKT%2Fmobile-megamenu-add-item.jpeg?alt=media\&token=d58edd59-8beb-42b3-b2bf-06e34abdd351)

## 1. Top items by link list

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRef18FkOXm2RbwS2oV%2F-MRegvFXdj8DcGeTFH2A%2Fmobile-megamenu-top-items-by-link-list.jpeg?alt=media\&token=bb7287ab-bc6b-426a-97f2-75e5db3cdcd4)

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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRef18FkOXm2RbwS2oV%2F-MRejtkq9FkEfyR9gh4S%2Fmobile-megamenu-level-style1.jpeg?alt=media\&token=1d031f8f-c424-4bcd-ba54-329f59470eab)

![Style 2](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRef18FkOXm2RbwS2oV%2F-MRejyKU0V57wyDuYyv0%2Fmobile-megamenu-level-style2.jpeg?alt=media\&token=9fcfab46-40d1-45bd-93c4-1df7c46cd784)

### 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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRhFsgKWF5ty8aMqGof%2F-MRhGxNXglcndTDM-Kv6%2Fmobile-megamenu-parent-item.jpeg?alt=media\&token=ddfcfeca-5d12-4ff5-b4df-e900c114062b)

### 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](https://beloria-docs.boostheme.com/tips#add-label-in-the-link-list-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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRhMSfQiQHhEvnfS0dz%2F-MRhN66sZmz9-2BONw3k%2Fmobile-megamenu-link-list.jpeg?alt=media\&token=f3f67784-3541-4bc9-a926-44dd7a02430b)

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](#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](https://beloria-docs.boostheme.com/tips#add-label-in-the-link-list-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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRhSXJ_VfKAEAlELlJG%2F-MRhVC1k06Xl8EygA8jr%2Fmobile-megamenu-link-list-settings.jpeg?alt=media\&token=39c977ec-0371-4f48-a5e1-9a725be23a31)

### 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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRhRaf_CriL--8Yk798%2F-MRhSCcykvQLicTaiQ4a%2Fmobile-megamenu-link-list-half.jpeg?alt=media\&token=ccb39e38-e2f5-4fdd-9be0-9a563b748b8e)

![Display the link list in 2 columns and the item's with is set to "full"](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRhRaf_CriL--8Yk798%2F-MRhSL7dvnEGP3HwKHOV%2Fmobile-megamenu-link-list-full.jpeg?alt=media\&token=a7088629-06d8-4a7a-b1ae-34ef0a4e4394)

### 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://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MRhPc73DQAxvmskMmSk%2F-MRhQ7tefBYjADJWOG5H%2Fmobile-megamenu-image.jpeg?alt=media\&token=64d95040-bf85-4f60-b625-1ca93e2ead6c)

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](#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](https://beloria-docs.boostheme.com/tips#add-label-in-the-link-list-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](#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](https://beloria-docs.boostheme.com/tips#add-label-in-the-link-list-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.