How to Setup the Mega Menu

The Clean Pro mega menu is by far one of the most popular features.  It requires a little extra setup.  The good news is that I'm going to break it all down for you in this tutorial.

Step-by-step setup

The video above will walk you through the setup in greater detail. Below are some of the key components required to get everything working.

1. Open the Global Header Module

The first thing you're going to want to do is look under the Start Here section of the module and make sure that Use Mega Menu is toggled on.

2. Set up your Advanced Menu

This is where you'll set up the top-level navigation items, which will trigger the mega menu from the header portion of your website.  In the Global Header module, open the Navigation Elements section. You'll see the dropdown at the top where you can select an existing menu or create a new one.

In this example, we'll create a new one, but you can still apply the mega menu to an existing menu in your account. Click the Create new (or Edit) button to jump to the Advanced menu editor.

The example below illustrates how it will appear when completed.

Notice above the highlighted text.  This is the HTML you need to add, which will trigger the associated mega menu that you'll set up in the steps following. Here is how it works...

Wrap each of the navigation items you want to act as triggers with this.

<span class="mega-drop-1">Products</span>

For each mega menu you plan on having, you'll want to increment the "mega-drop" number like this.

• mega-drop-2
• mega-drop-3
• etc.

Keep these in consecutive order in the menu. Meaning, do not order them like this: mega-drop-2, mega-drop-1, mega-drop-3. You might just blow up your computer if you do. :)

3. Add your "child" sub navigation items

While you're in the Advanced menu, you will still need to include your sub-navigation links.  This is what will appear when someone views your website on a mobile or tablet device. Your mega menu will not appear on a mobile device, only desktop.

Save your Advanced menu and head back to the Global Header module.

4. Create your Mega Menu

Back in the Global Header module, you'll see the section where you can add a mega menu.  You can create as many as you like.  Just click the add button to see all the available options.  This will look very familiar to how many of the Clean Pro modules are set up to work.

As you create multiple mega-menus, the order of them matters.  Keep them in top-down order according to how you set up the Advanced Menu. The mega-drop-1, mega-drop-2, triggers.

5. Adjust the position of the Mega Menu

This is a crucial part of getting the mega menu to work flawlessly. In the Global Header, access the Style Options / Mega Menu section of the module. You'll see two sliders that allow you to position the mega menu to from the top for both your Standard and Sticky nav.  

This will take a little experimentation to get right. What you want to do is preview the page in a new window. You will not be able to view the mega menu in the HubSpot editor. 

6. Adjust the "bridge" for the cursor (optional but helpful)

The "bridge" is an invisible helper that makes it easier for a visitor's mouse to travel from the navigation item down to the mega menu.  Scroll down in the same section as above, and you'll see where you can set the height of the bridge. Right below that, you'll see how you can give the bridge a color. Add 10% opacity so you're able to see it.  

You want the bridge to sit right at the baseline of your navigation items like this.

Once you've got it dialed in and working great, you can go back to the settings and change the bridge color back to 0% opacity.

7. Dial in your style settings

To change the color or a variety of style settings for the mega menu, you can find these in two places currently.

1. The Content Tab under Style Options / Mega Menu
2. The Style Tab under Mega Menu

The video tutorial above will go into this in a bit more detail if needed.

8. Publish the global header

Once you're happy with the mega menu, publish and you're done!

Great work.