Mega Menu

Usage

The Dirigible Mega Menu is very powerful and allows you to create interesting and intricate menus. However, a caveat, they are not always the best way for users to navigate your site as fewer options is usually better when it comes to guiding users through your site. So consider a standard drop down Menu or simply just having landing pages for your Dirigible site. Additionally, with a Mega Menu, you will have to recreate a more simplified version for a mobile interface.

With that said, let’s get into how you can make a Mega Menu that works for your site and your visitors.

Introduction to Mega Menu

To create your Mega Menu, in your dashboard go to Mega Menu > Add New. You’ll be asked to select your column style. From there, you can then add whatever Blocks you wish to the columns. We recommend Heading, List, and/or Image to give your menu a clean, yet interesting look. Remember to add links to your menu items!

Important to note that what you put here is one drop down menu even if it has many columns. It is also in your best interest to keep your columns relatively consistent in look so they aren’t so jarring to your viewers. 

Add Your Mega Menu to Your Main Menu:

In your dashboard go to Appearances > Menus. Add your Mega Menu to the Menu, placing it where you want and hit save in the bottom right.

Within Menu you will also want to create a mobile menu that recreates your Mega Menu, but better fits the mobile format. Here’s how to do that: 

Appearances > Menus. Under the Manage Locations tab, navigate to Mobile Menu and click on Use new menu. You’ll want to recreate the menu to be the same as your Main Menu. When it comes to your Mega Menu item we would recommend creating a landing page for mobile users. Then add that custom link in Menu. For a more detailed walkthrough go to minute mark 10:04 of the video above.

Style

Edit The Margin Bottoms of your Headings

In the Child Settings of the Heading Block, scroll down to the Advanced Settings of the Block on the right hand side. In the Additional CSS Class(es) field you’ll type in “mb-1”. This stands for “Margin Bottom 1”, which will adjust the gap between the heading and your list items.

Note: Feel free to also adjust the Align settings to alter the size and look of your Mega Menu Columns.