> For the complete documentation index, see [llms.txt](https://beloria-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://beloria-docs.boostheme.com/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section.md).

# 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](/static-sections/powerful-mobile-megamenu-section.md).
{% endhint %}

![](/files/-MReaJ0DBXf-edcV38O9)

## 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.

![](/files/-MRecQ-MDY4izm5U4_qs)

{% 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 %}

![](/files/-MRhgkR0G0gzH9QNk8t4)

## Global color settings

![](/files/-MRep6khPBBIyoBa5v3D)

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

![](/files/-MReppxitUfkJo1qbyS4)

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.

![](/files/-MRedUa_aoOtqWxdyxKT)

## 1. Top items by link list

![](/files/-MRegvFXdj8DcGeTFH2A)

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](/files/-MRejtkq9FkEfyR9gh4S)

![Style 2](/files/-MRejyKU0V57wyDuYyv0)

### 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.

![](/files/-MRhGxNXglcndTDM-Kv6)

### 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-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

![](/files/-MRhN66sZmz9-2BONw3k)

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section.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-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.

![](/files/-MRhVC1k06Xl8EygA8jr)

### 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"](/files/-MRhSCcykvQLicTaiQ4a)

![Display the link list in 2 columns and the item's with is set to "full"](/files/-MRhSL7dvnEGP3HwKHOV)

### 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

![](/files/-MRhQ7tefBYjADJWOG5H)

{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section.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-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](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section.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-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.