Pro Mega Menu

The Mega Menu feature is bundled with Botiga Pro as a module and allow you to create Mega Menus. Mega menus are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.

Activate the Mega Menu module

Go to Admin Dashboard > Appearance > Theme Dashboard, look for the Mega Menu module and click on Activate


Create the Mega Menu

Step 1 – You might create the mega menu either once you have the module activated and click on Customize or from Appearance > Menus

file-asevapf8mb-1835486Step 2 – Select an existing menu or create a new menu


Step 3 – Choose the top parent menu you do want to have a mega menu dropdown, expand the item and click Botiga Menu Options


Note: Direct childs from the top parent menu item always will be rendered as the columns from mega menu. You can have as many columns you wish. Said that, the mega menu structure of child items should be like in the below image (4 columns example):


Step 4 Once you have clicked on Botiga Menu Options button, a popup with options will open. Make sure to check the Mega Menu option.

Note: The popup options changes according to the respective level of menu item you are editing. For example, the first level (top parent menu item) will display the options below:file-imfgatvgyt-4919837

1. Mega Menu: Enables the mega menu in the respective item.
2. Mega Menu Width: Controls the width from mega menu. 
3. Mega Menu Dropdown Top Offset: Controls the distance between main menu items and the mega menu dropdown when you mouse over the item.

Styling Options:
1. Background Type: Controls the type of mega menu background (color or image).
2. Padding: Controls the padding from mega menu wrapper.
3. Text Color: Controls the text color from mega menu items. An option to control “:hover” state color is available as well.
4. Headings Text Color: Controls the headings text color from mega menu items (when enabled). An option to control “:hover” state color is available as well.
5. Headings Divider Color: Controls the headings divider color (when enabled).

The direct childs from the top parent level will display the options below:file-mz5tmg1bzd-8957586

Important: Keep in mind that direct childs (or second level menu items) always will be rendered as a column from the mega menu.

1. Column Width: Controls the with from the respective mega menu item column.
2. Padding: Controls the padding from the respective mega menu item column.
3. Content Type: Which type of content the respective mega menu item should render. 
3.1 Default: This content type will render the sub menu items (if any).
3.2 Custom HTML/Shortcode: This content type will render any custom HTML or Shortcode instead of the sub menu items. It’s useful if you want to display, for example, an image inside the column.

All the others levels of menus will display the options below:

file-mwbygictie-90609491. Turn this item into a mega menu heading: Removes the link styling from the respective item and turns it into a heading.
2. Disable link from this item:  Removes the link behavior from the respective item.
3. Content Type: Which type of content the respective mega menu item should render.
3.1 Default: This content type will render respective menu item link HTML and its sub menu items (if any).
3.2 Custom HTML/Shortcode: This content type will render any custom HTML or Shortcode.

That’s it! At this point your mega menu should looks like the below image:


Adding Badges/Labels

The mega menu module also allows the insertion of Badges/Labels to any item on the menu. Badges/Labels works standalone which means that it works with or without mega menu. 

Step 1 – Edit any menu item from your menu (Appearance > Menus) by clicking on the Botiga Menu Options button

file-ii28hqllpf-4372373Step 2 – Check the Display a badge/label on this item option. New sub options will be shown to control the badge/label title and styling. 

Step 3 – Save the menu and check the website front end. Here’s an example: