Mobile Menu

PreviousLayout 02 NextSection On Every Page

Last updated 2 years ago

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:

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

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

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

Menu Item
Link Item
Menu List

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.

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

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

About images, you can upload PNG or JPG format:

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

Upload image with the same name as the [handle-of-menu][menu-level-2-name].[IMG FORMAT]

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

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

Upload image with the same name as the [handle-of-menu][menu-level-3-name].[IMG FORMAT]

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