Pro Mega Menu

The Mega Menu feature is bundled with Botiga Pro as a module and allows you to create attractive mega menus without any code. 

A mega menu is an expandable menu that displays all the submenus in a two-dimensional layout whenever the user hovers the cursor over a menu item.

Why Add a Mega Menu to Your WooCommerce Store?

Mega menus have multiple benefits for eCommerce stores.

For example, you can:

  • display a lot of menu items at once, which is especially good for sites with larger product catalogs or with a lot of product categories
  • show lower-level pages at first glance
  • add images or icons to your menu
  • highlight a menu item, e.g. you can add a ‘New!’ or ‘Sale!’ badge
  • feature your most important products
  • increase user engagement
  • …and more

The video below shows Botiga’s mega menu in action — you can also check out the mega menu feature in our live demo for Jewelry stores:

Botiga’s mega menu is also responsive. On small screens, it’s hidden behind a stylish hamburger icon, but all the options are available when the menu is open.

Here’s what the mega menu above looks like on mobile devices:

Activate the Mega Menu Module

Go to Appearance > Theme Dashboard > Theme Features, look for the Mega Menu module, and click the Activate button:

Activating the Mega Menu module

Create a Mega Menu

Step 1

Open the Menus admin page by either clicking the Customize button in the Mega Menu module or selecting the Appearance > Menus option in the left sidebar of your WordPress admin area:

Opening menu admin page

Step 2

On the Menus admin page, either select an existing menu to edit or click the create a new menu link:

Create a new menu in the WordPress admin area

Note: The direct children of the parent menu item will be rendered as the columns of the mega menu. You can have as many columns as you wish.

For instance, here’s an example of a four-column mega menu layout:

Example of a four-column mega menu on the backend

Step 3

Choose the parent menu item where you want to add the mega menu, expand it, and click the Botiga Menu Options button:

Location of the Botiga Menu Options button

Step 4

Once you have clicked the Botiga Menu Options button, a popup with styling options will open. The popup options change according to the respective level of the menu item you are editing.

Top-Level Options

For the parent menu item, check the Mega Menu option:

The first level will display the following options:

  1. Mega Menu: Enables the mega menu.
  2. Mega Menu Width: Controls the width of the mega menu.
  3. Mega Menu Dropdown Top Offset: Controls the distance between the main menu items and the mega menu dropdown.

Styling Options:

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

Column Options

The direct children of the top level (Columns) will display the following options:

Mega menu, column-level options

Important: Keep in mind that second-level menu items will always be rendered as the columns of the mega menu.

  1. Column Width: Controls the with of the column.
  2. Padding: Controls the padding of the column.
  3. Content Type: Defines the type of content the column will render:
    • Default: This content type renders the submenu items (if any).
    • Custom HTML/Shortcode: This content type renders any custom HTML or shortcode instead of the submenu items. It can be useful when you want to display an image inside the column.
    • Custom Content Block: This content type renders a template you created with the Templates Builder module. Learn more about it here.

Lower-Level Options

All the other menu levels will display the following options:

Mega menu, low-level options
  • Turn this item into a mega menu heading: Removes the link styling from the respective item and turns it into a heading.
  • Disable link from this item:  Removes the link behavior from the item.
  • Content Type: Define the type of content the item will render:
    • Default: This content type renders the item and its submenu items (if any) as HTML anchor tags.
    • Custom HTML/Shortcode: This content type renders any custom HTML or shortcode.
    • Custom Content Block: This content type renders a template you created with the Templates Builder module. Learn more about it here.

That’s it! At this point, your mega menu should look like the screenshot below:

Botiga mega menu, example diagram

Add Badges/Labels

The mega menu module also allows the insertion of badges or labels to any menu item. Badges/Labels are standalone features, which means that they work both with and without the mega menu.

Step 1

Edit any menu item by clicking the Botiga Menu Options button:

Choose Botiga Menu Options to add badges or labels

Step 2

Check the Display a badge/label on this item option. New options will be shown to control the title and styling of the badge or label:

Badge/Label editor

Step 3

Save the menu and check the frontend of your website. Here’s an example with three badges:

Badges example on the frontend