Vertex Mega Menu & Navigation

1. Introduction

The Vertex Mega Menu & Header Navigation module is a premium custom module designed for HubSpot CMS. It allows you to build multi-column dropdown mega menus, integrate call-to-action buttons, embed promotional features, add dynamic blog listings, and implement responsive navigation menus directly from your HubSpot Page Editor.

2. Installation & Integration

To use this header module in place of your existing theme's default header, follow one of these two methods:

Method A: Inside the HubSpot Page Editor (Recommended)

1. Open any page using your HubSpot page editor.
2. Hover over the default header area and click on Edit global content in the sidebar options (since headers are global components).
3. In the global content layout editor panel on the left, click on your default header module name, select Change module, and search for Vertex Mega Menu & Header Navigation.
4. Select the module and click Publish changes to apply the new header across all your website pages automatically.

Method B: Replacing Code in Design Manager Templates

If you prefer editing theme templates directly:

1. Go to Marketing > Files and Templates > Design Tools.
2. Open your theme layout template (e.g. base.html or partials/header.html).
3. Replace the old header module reference with the following HubL global module tag:

{% global_module "vertex_mega_menu" label="Vertex Mega Menu", src="../vertex-mega-menu.module" %}

3. Customizing the Navigation Menu

In the Module Editor, under the Navigation Menu Options group, you can customize your links:

• Menu Source: Select HubSpot Native Menu to pull link structures directly from your HubSpot portal settings, or Custom Mega Menu Builder to build custom multi-column lists inside the editor.
• Building Mega Menus:
  • Add a navigation item (e.g., "Solutions") and enable the "Enable Mega Menu Dropdown" toggle.
  • Choose your layout column grid count (supports 2, 3, 4, 5, or 6 columns).
  • Under the Columns Content Repeater, add headings and nested lists of submenu links. You can also specify icons from FontAwesome (e.g., fas fa-cogs) for each link.

4. Configuring the Featured Card Block

Embed call-to-actions directly inside your mega menu panel to drive conversions:

1. Toggle "Enable Featured Card" in the settings group.
2. Set custom badges (e.g., "New Feature"), titles, descriptions, and CTA links.
3. Configure background colors, custom border width, border color, and rounded border-radius settings in the sidebar panel.

5. Header Styles & Animations

Click on the Styles tab in the sidebar editor to customize layouts:

• Header Layout: Toggle the Make Header Sticky option to shrink and float the header during scroll, or Transparent Header for overlaying on heroes.
• Glassmorphism: Enable Glassmorphism Blur to apply a modern frosted glass background effect.
• Entry Transitions: Customize how the dropdown drops (supports Fade In, Slide Down, Scale Up, and Zoom In) along with custom millisecond speed transitions.

6. Support & Resources

If you encounter any issues configuring your Vertex Mega Menu, contact us at gulrezlinuzxbean@gmail.com.