Powerful Megamenu section

To modify the theme's settings, you have to open the customize page. If you don't know how to do that, please refer to here.

You can build your own megamenu in Theme Settings. On the customize page, click "Powerful Megamenu".

menu 1

Megamenu is built based on the menu item types. precia theme provides 6 menu item types will help you build the menu easily. To add a menu, click "Add content" button, then choose an item type you want to add.

menu add

If you would like to use a simple menu such as a link list instead of the mega menu. Just tick "Show a link list as menu", then pick a link list you want to show. The specified link list will be shown instead of the mega menu.

simple menu

The below content will help you understand all menu item types clearly.

1. Parent Item:

This is the top level item. All other item types will be shown in a drop-down of this item.

menu parent

In this item's settings: you can change item's title, the text color, and dropdown width. You can also add a menu label. View here for more details about a label.

menu parent 1

menu parent 2

Tips: to see the changes in the dropdown, you have to hover mouse to parent item to show the drop-down. That is really uncomfortable if you want to see your changes directly. Don't worry! Precia theme provides a tool which will help you solve this problem. In parent item's settings, scroll down to the bottom, you will see a checkbox with label: "Always show drop-down".

menu developer

Just tick this checkbox, the dropdown menu of current parent item will be shown even you don't hover the mouse. Don't forget to untick this checkbox before you save menu if your theme is living so that the drop-down menu is only shown when a customer hovers the mouse on the parent item.

2. Subitem - Common settings:

Let us explore the common settings of all subitems before view their details. These are the settings are available in all subitems.

Note: all subitems will be displayed in the drop-down of parent item which is adjacent just in front of their position. Check below image:

menu structure

a. Menu name:

This setting helps you find the item easily in Theme Settings. It is not displayed at the storefront.

menu name

b. Tittle Settings group:

menu title settings

The title will be displayed on the storefront. You can also align title, set color, and its position. If you tick "Extend text color from parent", the text color will get a value from its parent item.

c. Layout settings group:

- Column width : by default, the dropdown always has same 12 columns like Bootstrap's layout. You can grant the number of columns as the width of subitems.

menu layout width

- Inside and outside gutter:

menu layout gutter

d. Own Background Settings:

Add your background color for subitem, you can also upload your background image or provide an external image URL.

menu background

3. SubItem - Linklist:

menu link list

Choose an available link list. If your site does not have any link list, you can create a new link list in Online Store > Navigation. Refer this article https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links for more details about link list.

menu navigation

You can also set the color for link list, or extend the color from parent item.

In addition, you can add your label in a link list. View here for more details about the label. The color configuration for a label is also available in this subitem.

menu label settings

4. Subitem - Image:

menu image

Note: "image size" field only helps you compress the image to valid size for optimizing performance. It does not help you display image bigger. If you want to display image bigger, you can increase the width of subitem. View "Layout settings group" in this section for more details.

5. Subitem - product:

menu product

View here for details of product item settings.

6. Subitem - Html:

Add your custom html. You can also change text color for the texts in your html.

menu html

7. Subitem - Row Line:

menu line