Mega Menu
How to Configure and Style Mega Menu in Elementor #
The Elementor Mega Menu Widget provided by Spexo Addons is one of the easiest addons for both beginners and web design masters in order to create mega menus for websites. As the plugin is meant for Elementor, we will show you how to use the mega menu widget inside the Elementor editor page including the customizations.
Please read the whole content to learn about the precise controls to use the mega menu widget yourself.
Basic preparations #
First, navigate to the Spexo Addons -> Widget Settings tab. Here, you can type Mega Menu inside the search bar on your right and find the widget. Then turn on the widget’s switcher.
How to Create a Mega Menu #
Before using the Mega Menu widget to display mega menus inside your webpage, you need to first create a mega menu of your choice from the WordPress dashboard. Let’s take a look at the procedure of creating a mega menu within 5 minutes.
Create a menu #
First of all, make sure that you had already created a Menu to use it on Mega Menu. To create a menu, simply go to your WordPress Dashboard. Then navigate to wp-admin -> Appearance -> Menus.
You can simply use its drag & drop facility to create a Menu & save it.
Mega menu creation #
If you hover over the menus, you will see a floating option named mega menu appear beside the menu items. Now, click on the floating button.
Clicking the floating button will open a popup window that contains the basic settings for the mega menu.
Customize Mega menu settings #
Here, you need to turn on the Enable Mega Menu switcher first, and then select a dropdown position and width for the menu. Once done, click the SAVE button once.
After finishing the mega menu setting, you should click the Edit with Elementor for further menu customization.
Customize inner menu content #
Once clicked the button mentioned just above, a second popup window will fill your whole browser screen with the Elementor editor page. Here, you can drag and drop widgets into the ‘Drag widget here‘ or the ‘+’ section inside the window and design your mega menu content. For this, you can used an any widget to design the mega menu as your preference.
Once you are done making the layout, click on the X icon at the top-right corner of this page.
With that, you will return to the menu page with the basic mega menu popup window still open. Now, click on the SAVE button again to save everything you have done till now.
How to Activate Mega Menu #
To use this Spexo Addons element, find the ‘Mega Menu‘ element from the Search option under the ‘ELEMENTS‘ tab.
Simply just Drag & Drop the ‘Mega Menu’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with this step, this is how the element is going to look like.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will find the ‘Menu’ section.
Menu #
From this section, you can choose a ‘Menu’ out of which you have created on your website. Besides, you can use the drop-down menu to choose your preferred Layout as well. By default, it is set to ‘Horizontal’ layout. Also you can align menu with supported all devices.
Menu Items #
From this section, you can choose a hover effect, hover animation and transition duration. Besides, you can use the drop-down menu to choose your preferred sub menu icon, sub menu display action and sub menu entrance well.
Mobile Menu #
From this section, you can use the drop-down menu to choose when open mobile menu. You can also change display type and mobile menu width as well.
Besides, you can change the toggle button icon, use the drop-down menu to choose your preferred toggle icon and alignment with responsive option.
Click to see Live Demo #
How to Style Mega Menu #
Switch to the ‘Style’ tab to style all the features of Mega Menu.
Menu Items #
From the ‘Menu Items’ section, you can change the text color with hovered and normal options, in hovered option you can also set pointer color. You can use toggle for highlight active item, also change sub menu icon size, pointer height, typography, pointer height and many more.
Besides, you can change the inner and outer horizontal spacing, vertical spacing and sub menu offset supported in all devices. Moreover, you can add styling to the Border as well.
Others #
You can also add styling to ‘Menu Item Badge’, ‘Sub Mega Menu’, ‘WordPress Sub Menu’, ‘Toggle Button’ & ‘Mobile Menu Items’ by changing the color, spacing & many more as per your preference.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Mega Menu as per your preference.
This is how you can easily display amazing mega menu on any place of your website using Mega Menu.
If you face any difficulties, feel free to contact our support team for further assistance.
Functional Always active
Preferences
Statistics
Marketing
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.