# Powerful Mobile Megamenu

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

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

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

## 3. Menu item types

Mobile Megamenu is built based on the menu item types. Our theme provides 2 menu item types that will help you build the menu easily. An item is a block. Please refer to [this guide](https://beloria-docs.boostheme.com/manage-blocks-in-a-section) for managing blocks in a section.

### 3.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 of this type can render lots of level 1 menu items.

#### GENERAL SETTINGS

* **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 children's style 1.

#### COLORS

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

### 3.2. Menu item

#### GENERAL SETTINGS

* **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-a-label-icon-to-a-text-link-list-shopify-navigation) 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

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

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MgxR-ZNovwX1qH0QgOY%2F-MgxRj_NDlfgaDxtk8AW%2Fimage.png?alt=media\&token=ae389612-dfd2-4eb3-bb15-bc166e490822)

#### FOR DEVELOPER

Add your custom HTML for the item.

#### CHILD ITEM (LEVEL 2 & 3) SETTINGS

This item type offers 5 children items. Below are settings in a child item:

* **Enable:** tick to show the child item.
* **Title:** add the item's title. The title will be shown as a level 2 item.
* **URL:** set the link for the item.
* **Item's width:** adjust the width of the item's content. The item content will be shown as a level 3.
* **Item content ( level 3 ):**
  * **Pick a link list:** choose a link list to display in the item content.
  * **Show the link list in 2 columns:** tick to show the link list in 2 columns.
  * **Label color:** set the color of labels that are shown in the link list. Please refer to [this guide for adding labels in a link list](https://beloria-docs.boostheme.com/tips#add-a-label-icon-to-a-text-link-list-shopify-navigation).
  * **Label background color:** set the background color of labels that are shown in the link list.
  * **Image:** pick or upload an image to display in the item content.
  * **The text overlay:** add text to display override the image.
  * **URL:** set the link for the image.
  * **Your text or HTML:** add custom text or HTML to display in the item content.