# Powerful Mobile Megamenu

{% hint style="info" %}
This guide only matches with version 3.0.0 or newer. If you want are using version 2.2.1 or older, please refer to [the old guide](https://vodoma-docs.boostheme.com/static-sections/powerful-mobile-megamenu/old-powerful-mobile-megamenu).
{% 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://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)

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

## 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://vodoma-docs.boostheme.com/manage-blocks-in-a-section) for managing blocks in a section.

### 3.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 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://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 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://vodoma-docs.boostheme.com/tips#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

* **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://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MflNSRid3i07ngI54ms%2F-MflQFQ4ZsHL34nrhnGC%2Fmega-menu-mobile-levels.png?alt=media\&token=9318a507-4869-4d41-baf7-85deb3cca96d)

#### 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://vodoma-docs.boostheme.com/tips#add-a-label-icon-to-a-text).
  * **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.