> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bonnita-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bonnita-documentation/header/mobile-menu.md).

# Mobile Menu

Bonnita theme allows you to set up the menu on mobile and desktop separately.

To set up the mobile menu, please follow instructions below:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings ->** **Multiple Layouts / Mobile Menu Layout.**
4. Choose **Custom Menu**. If you choose **Default**, the desktop menu is applied.

![](/files/mkdYyP9IQkrBpHStWzMK)

## How to configure Mobile Menu?

Bonnita provides 3 Mobile menu tabs corresponding to 3 sections as shown below:

<figure><img src="/files/i21O4WmAuveOfF1d8o10" alt=""><figcaption></figcaption></figure>

Each section has different menu blocks and you can add the type of block you want.&#x20;

* Menu Item
* Link Item
* Menu List

<figure><img src="/files/JXO8zUtYdECJHLsOn4VZ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: Please fill out **Heading** text box of Mobile Menu. **The heading must be different for each mobile menu section.**

After adding the menu item, please reload Theme Editor View to see the change. You can check the change on actual devices like mobile or tablet.
{% endhint %}

![](/files/0pYhtrpg4HU97IK7TTuz)

## How to set up icon / image for Mobile Menu?

### Menu Level 1

You can set up icons or images for Menu Level 1:

<figure><img src="/files/KwSE2DnxpEtFeRoU0Dgn" alt=""><figcaption></figcaption></figure>

![](/files/usaVWsks8tNcBsGChF5j)

About icons, you can upload SVG format: enter the SVG code of the icon in the **SVG Icon** field:

![](/files/C2NLM47kKH8rq5btPPCe)

About images, you can upload PNG or JPG format:

![](/files/8B18PSBtJZWlIhRfkd7y)

### Menu Level 2 & Menu Level 3 (List Layout)

About level 2, level 3 menu, you can set up images only:

<figure><img src="/files/gAQTmnVUBwJIqnBljZuO" alt=""><figcaption></figcaption></figure>

![](/files/Gd1wEJbWBiYaKb9gycue)

{% hint style="info" %}
Upload image with the same name as the \[handle-of-menu]\[menu-level-2-name].\[IMG FORMAT]

To get the image URL, please upload the image in **Settings** **->** **Files**. Then copy the link. You can refer to [this link](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

Naming convention: lower cap and use "-" to replace white space. For example: with the menu level 2 "Top Rated" and menu handle "menu-mobile-new-in", the image name will be menu-mobile-new-intop-rated.jpg or menu-mobile-new-intop-rated.png
{% endhint %}

### Menu Level 3 (Grid Layout)

Please turn on "**Show Images Below The Sub Menu Items?"** checkbox to show **Grid Layout** for Menu Level 3:

<figure><img src="/files/0e5UsUGBOStjlkUAGPGI" alt=""><figcaption></figcaption></figure>

![](/files/g8Grs0p2KlQxn9lKJdcD)

{% hint style="info" %}
Upload image with the same name as the \[handle-of-menu]\[menu-level-3-name].\[IMG FORMAT]

To get the image URL, please upload the image in **Settings** **->** **Files**. Then copy the link. You can refer to [this link](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

Naming convention: lower cap and use "-" to replace white space. For example: with the menu level 3 "Shoulder Bags" and menu handle "menu-mobile-new-in", the image name will be menu-mobile-new-inshoulder-bags.jpg or menu-mobile-new-inshoulder-bags.png
{% endhint %}

## Instruction Video. Follow the same below instruction for BONNITA

{% embed url="<https://youtu.be/QeWgsaf7gwI>" %}