HEA Mega Menu

The Mega Menu feature allows users to create advanced navigation menus in WordPress with Elementor integration. This documentation covers the settings and configurations available for setting up and customizing the Mega Menu.

1. WordPress Mega Menu Settings

1.1 Enabling Mega Menu

1. Navigate to Appearance > Menus.
2. Select the menu where you want to enable the Mega Menu.
3. Expand the desired parent menu item.
4. Enable the Mega Menu toggle option.

2. Elementor Mega Menu Settings

2.1 Adding Mega Menu in Elementor

1. Open the Elementor Editor.
2. Drag and drop the Mega Menu Widget into the desired section.
3. Select the WordPress menu to be used as a Mega Menu.

2.2 Customizing the Mega Menu in Elementor

1. Configure menu alignment (Left, Center, Right) to position the Mega Menu properly within the layout.
2. Adjust Typography padding, margin, and responsiveness to ensure proper display across different screen sizes.
3. Adjust Dropdown Menu

The Menu section in the Mega Menu widget allows you to customize the appearance and spacing of the main menu items. Below are the available customization options:

1. Typography

• Adjusts the font family, size, weight, and style for menu items.
• Controls letter spacing and line height for better readability.

2. Gap

• Sets the spacing between menu items.
• Helps control the layout and alignment of the menu.

3. State Customization (Normal, Hover, Active)

• Normal: Default styling of menu items.
• Hover: Styles when the user hovers over a menu item (e.g., change text color).
• Active: Styles for the currently active menu item.

4. Text Color

• Allows you to change the menu text color for different states (Normal, Hover, Active).

5. Background Type

• Choose between Solid Color, Gradient, or Image Background for the menu items.

6. Border Type

• Set a border style (e.g., Solid, Dashed, Dotted) for menu items.

7. Border Radius

• Adjusts the roundness of the menu item corners.

8. Padding & Margin

Margin: Defines the spacing around the menu items.

2.3 Adding Advanced Widgets

Padding: Controls the inner spacing around menu text.

1. Insert Icons, Images, or Buttons into the menu structure for better visual appeal and navigation.
2. Use Dynamic Content to display featured items, categories, or user-specific content dynamically.

The Dropdown section in the Mega Menu widget allows you to style and configure the appearance of dropdown menus within the navigation. Below are the available customization options:

1. Typography

• Adjusts the font style, size, weight, and spacing for dropdown menu items.

2. Top Spacing

• Controls the vertical spacing between the main menu and the dropdown.

3. Background Type

• Customize the background of the dropdown menu using a solid color, gradient, or image.

4. Border Type

• Choose a border style (Default, Solid, Dashed, Dotted) for the dropdown.

5. Border Radius

• Adjust the roundness of dropdown corners to create smooth edges.

6. Padding & Margin

• Padding: Adjusts the inner spacing around dropdown menu items.
• Margin: Defines the spacing around the dropdown container.

The Toggle Button in the Mega Menu allows users to enable or disable the menu in a responsive manner, especially for mobile and tablet views. Below are the customization options available:

1. Width

• Adjust the size of the toggle button to fit your design preferences.

2. Typography

• Customize the font style, size, and spacing if text is included in the toggle button.

3. Icon Size

• Control the size of the icon used for the toggle button (e.g., hamburger menu icon).

4. Icon Color

• Set the color of the icon for both normal and hover states.

5. State Customization (Normal, Hover)

• Normal: Default appearance of the toggle button.
• Hover: Changes the button’s appearance when hovered over.

6. Background Type

• Apply a solid color, gradient, or image to the toggle button’s background.

7. Border Type & Border Radius

• Choose the border style (Default, Solid, Dashed, Dotted) for the toggle button.
• Adjust the border radius to create rounded corners.

8. Padding & Margin

• Padding: Adjusts the inner spacing around the toggle button icon.
• Margin: Defines the space around the toggle button container.

The Close Button in the Mega Menu provides users with an easy way to close or hide the menu when it is expanded. Below are the customization options available:

1. Width

• Adjust the size of the close button to ensure visibility and usability.

2. Icon Size

• Control the size of the close (×) icon to match your menu design.

3. Icon Color

• Set the color of the close icon for both normal and hover states.

4. Alignment

• Choose the positioning of the close button (Left, Center, Right, Justified).

5. State Customization (Normal, Hover)

• Normal: Default appearance of the close button.
• Hover: Adjust the appearance when the button is hovered over.

6. Background Type

• Apply a solid color, gradient, or image as the button’s background.

7. Border Type & Border Radius

• Choose the border style (Default, Solid, Dashed, Dotted).
• Adjust the border radius to control corner rounding.

8. Padding & Margin

• Padding: Adjusts the inner spacing around the close icon.
• Margin: Defines the space around the close button container.

The Responsive Menu ensures the Mega Menu adapts perfectly to different screen sizes, providing an optimized experience for mobile and tablet users. Below are the customization options available:

1. Width

• Adjust the width of the responsive menu to fit mobile and tablet screens.

2. Background Type

• Set a solid color, gradient, or image as the background for the mobile menu.

3. Overlay Color & Opacity

• Overlay Color: Choose an overlay to dim the background when the menu is open.
• Overlay Opacity: Adjust the transparency level of the overlay effect.

4. Border Type & Border Radius

• Set the border style (Default, Solid, Dashed, Dotted) to define the menu edges.
• Adjust the border radius to control the roundness of the menu corners.

5. Padding & Margin

• Padding: Defines the inner spacing of the responsive menu container.
• Margin: Adjusts the space around the menu for better placement.

6. Menu States (Normal, Hover, Active)

• Normal: Default appearance of the responsive menu.
• Hover: Styles applied when a user hovers over the menu.
• Active: Styles for when the menu item is selected.

7. Text & Background Styling

• Text Color: Customize text colors for menu items.
• Background Type: Set different backgrounds for menu states.

3. Create Template for Mega Menu

Navigate to Huda Templates Create Template Called “Mega Menu Template”.

4. Select Template For Mega Menu

No navigate to Appearnce Menus and select template for mega menu recently created

5. Create mega menu In Elementor Drag & Drop

Now you will create your mega menu menu layout inside elementor.