The default WordPress navigation menu proffers limited options and no customization. This, in turn, restricts one’s chances to make the most of the online website. So, what is the easiest and economical way out
Use mega menu plugins for WordPress. It allows creating the design and style of the website to one’s satisfaction. A fine example of a mega menu builder in WordPress is Elementor mega menu with Stratum.
When looking to build a content-rich and responsive mega menu, think Elementor with Stratum mega menu addon. Stratum mega menu addon allows designing advanced navigation menus with different types of content in the sub-menus.
WordPress Mega Menu Addon By Stratum
Here is how you can use it.
#1. Create/Select a Menu
-
Install Stratum mega menu plugin
|
Go to Dashboard> Appearance> Mega Menu |
From the above, select the current menu (if you have a working menu). Or create a new using default WordPress tools. Remember the name of the menu item selected. You can even check for elementor discount code.
#2. Customize Top-level Elementor Menu
Each menu displays options to add badges and icons.
Icons
Select an icon from the library or upload a custom SVG icon.
Badges
Apply text or add custom text and background colors.
Note: No need to add the above when only improving the submenus.
#3. Create Mega Menus for Selected Menu Items
Click the ‘Enable Mega Menu’ box and the ‘Edit Mega Menu’ Button.
The Elementor visual builder interface will open up. Create a submenu for the chosen sub-menu item here.
-
Add a section
-
If required, arrange columns.
-
Apply background color (if required)
-
Add Elemnetor widgets into columns. Use Elementor Style Lab to customize widgets.
Every widget has different styling settings. With Elementor, create a mega menu for any selected menu item, including styling and designing.
Then, update in Elementor > Go back to WordPress menu > Save Menu
#4. Replace Default Theme Menu with WordPress Megamenu
Hide the default WP theme with the WordPress mega menu created above. To execute it, use the Elementor canvas template that doesn’t possess a menu.
In the Page Attributes menu, choose the required template. Open Elementor Editor. Add mega menu created.
-
Select the menu.
-
Choose the position: Horizontal or vertical.
Horizontal
Vertical
Apply default submenu appearance animation effects if you like.
Customize the styling for the entire menu globally.
Take a look at how to do it.
Menu Globally
-
Background type (gradient or classic), borders, paddings, width.
-
Shadows and alignments
Menu Item Style (Nested levels and First Levels)
-
Apply the required box-shadow. Add borders. Customize alignments.
-
Alter text color, typography, etc.
Arrow and Icon style
-
Alter size, color, alignment, and spacing
Badge Style (Nested levels and first level)
-
Customize box-shadow, margin, paddings, border radius, border type, background color, typography, and more.
Dropdown Style (Nested levels and first levels )
-
Width choices
Responsive Settings
-
For mobile devices, turn on the hamburger menu (optional).
-
Change styling and alignment
On mobile devices, WordPress mega menu changes into the Elementor hamburger menu.
After you have applied all the settings, save the page.
Note: Perform one extra step. For each page, you will have to do it manually.
Why Use the New WordPress MegaMenu Plugin for Elementor By Stratum
When looking to add an Elementor mega menu without any technical support, try the Stratum Mega Menu addon. It follows a robust approach with ample features and customization options to help create all parts of the menu. Check Motopress blog for more information.
