Mega Menus in Astra Pro enhance navigation by offering advanced and user-friendly experiences, making it easier for visitors to explore your site. With Spectra’s robust design tools, you can create visually appealing and highly functional Mega Menu templates with ease.
This guide will walk you through the steps to create a Mega Menu template for Astra Pro using Spectra.
How to Create an Astra Pro Mega Menu Template Using Spectra
Before you begin, ensure the following:
- Astra Pro is installed and activated on your website.
- The Nav Menu and Site Builder module in Astra Pro is enabled.
- The Spectra plugin is installed and active.
Enable the Required Modules
- Navigate to Astra → Dashboard in your WordPress dashboard.
- Enable the “Nav Menu” and “Site Builder” modules.
Create a New Spectra Template
- Go to Astra → Dashboard in the WordPress dashboard.
- Locate the “Site Builder” section.
- From the “Website Parts” panel, select “Hooks”.
- Click the “Create New” button.
- Name your template (e.g., “Mega Menu Template”).
- Click “Publish” to save the template.
Design the Mega Menu Template
Use Spectra blocks to create a visually appealing and responsive Mega Menu. Here’s what you can include:
- Columns: Build a layout structure with multiple columns for better organization.
- Buttons: Add call-to-action links to guide users effectively.
- Images or Icons: Enhance the menu visuals with relevant media.
- Headings and Text Blocks: Organize content clearly for better readability.
Assign the Template to the Mega Menu
- Go to Appearance → Menus in your WordPress dashboard.
- Select the menu you wish to edit.
- Locate the menu item where you want the Mega Menu to appear and expand its settings.
- Click the Astra Menu Settings button.
- Assign the designed template to the selected menu item.
Configure the Mega Menu Settings
- In the settings panel:
- Toggle on the Enable Mega Menu option.
- For the submenu:
- Click the Astra Menu Settings button.
- Select Template from the Content Source dropdown.
- Choose the Spectra template you created earlier.
- Click Save Changes and close the sidebar by clicking the x.
Preview and Publish
- Save the menu by clicking the Save Menu button.
- Preview your website to ensure the Mega Menu appears as expected when hovering over the assigned menu item.
- Make adjustments to the Spectra template or Mega Menu settings if needed.
By following these steps, you can design and implement stunning Mega Menus using Spectra and Astra Pro.
For further assistance or if you encounter any issues, leave a comment below or please contact our support team.
