Enabling the Mega Menu

Learn how to enable the Mega Menu feature in the Generator theme. Understand how to publish changes to apply the new Mega Menu header.

Steps to Enable the Mega Menu:

Enter the Theme's Global Style Settings

In the HubSpot CMS editor, click the edit button in the top left corner and select "Theme: Generator."

Access Mega Menu Settings

In the global style settings area, go to "More settings" and select "Mega Menu Header."

Toggle Mega Menu Option:

Toggle on the "Mega Menu Opt-In" switch to enable the Mega Menu feature.

Publish Theme Changes:

Click the orange "Publish Theme" button to apply this global change to all of your templates. You will be taken back to the page editor, and your page will now have the new Mega Menu header.

Configuring the Mega Menu

Learn how to configure the Mega Menu, including adjusting the logo, CTA button, and building the menu structure.

Steps to Configure the Mega Menu:

Enter the Global Content Editor:

Click on the header section of your page to enter the global content editor.

Building Your Mega Menu:

A Mega Menu is comprised of columns that can contain rich text, images, and links. Start by creating your menu items, and then adding columns to each menu item's menu.

Create Menu Items:

Click the "Add one" button to add a new menu item. Each menu item will contain its own Mega Menu.

Add Columns to Mega Menu:

Give the menu item a name and then click "Add one" under the Mega Menu Columns section to add a new column.

Configure Column Content:

Set the column width and choose the type of content: Rich Text or Menu. Use Rich Text to add images, text, and links to the column. Use Menu to add a list of links. First, create the menu in your HubSpot settings, then select it from the Menu dropdown.

Apply Changes:

Click "Apply changes" to save each column. Repeat the process to add additional columns to the Mega Menu.

Publish the Mega Menu:

Once you have finished building the Mega Menu, click the orange "Publish" button in the top right corner to apply the changes.

Lesson 3: Styling the Mega Menu Objectives:

Learn how to style the Mega Menu to match your site's design. Steps to Style the Mega Menu:

Enter the Theme's Global Style Settings:

In the HubSpot CMS editor, click the edit button in the top left corner and select "Theme: Generator." Access Mega Menu Styling Options:

In the global style settings area, go to "More settings" and select "Mega Menu Header." Customize Styles:

Adjust the styles for the Mega Menu

Adjust the styles for the Mega Menu, including background color, font styles, link colors, and spacing. Ensure these settings align with your brand's design guidelines.

💡 Reminder: After making any changes to the Mega Menu styles, remember to click the orange "Publish Theme" button to apply these changes globally.

By following these steps, you will successfully enable and configure the Mega Menu in the Generator theme. In the following modules, we will cover how to adjust the styles for your Mega Menu to ensure it matches your site’s design.