Wednesday, June 23, 2021
HomeTechnologyHow To Build a Mega Menu on Your WordPress?

How To Build a Mega Menu on Your WordPress?

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.

#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.

Raj Hirvate
Hi, I am Raj Hirvate. Big time Anime Fan and Tech Blogger from India. You can follow me on my social media or contact me for any queries. Happy Blogging!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Follow Us

Most Popular