Do you want a mega menu that opens from the side? A side mega menu keeps your categories in a column and opens a wide panel next to it, which suits shops with many product groups.
With the Navigation Menu widget from The Plus Addons for Elementor, you combine a Vertical Side Menu with Plus Mega Menu panels.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free Navigation Menu Lite widget does not have this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A WordPress menu under Appearance > Menus, if you use the Default menu type.
Step 1: Build the mega menu
Create the Plus Mega Menu panels and the WordPress menu as in how to create a mega menu. For a panel that fills the space next to the menu, set the parent item’s Mega menu Type to Container or Full Width.
Step 2: Choose Vertical Side Menu
Add the Navigation Menu widget to a sidebar, page or template. In Layout, keep Menu Type on Default. Menu Direction is a row of three pictures — Horizontal Menu, Vertical Menu and Vertical Side Menu, in that order. Hover over a picture to see its name. Choose the third one, Vertical Side Menu.
Step 3: Set the direction and pick the menu
In Content, pick your mega menu in Select Menu. Set Open Direction to the side of the page your menu sits on: Left (default) opens panels to the right of the menu, Right opens them to the left.
Step 4: Set up the title bar
Vertical Side Title Bar (on by default) adds a bar above the menu. Title Bar Hover/Click keeps the menu always open (Normal), opens it on Hover, or toggles it on Click. Change the text in Title, add a Title Link, and add Prefix Icon and Postfix Icon.
That’s it, now you’ll have a side mega menu.
How Wide Is the Panel?
With Container or Full Width, the panel fills the rest of the container: the container’s content width, minus the menu’s width, minus 20px. So a 1140px container with a 240px menu gives an 880px panel. The width is recalculated when the window is resized.
Limitations
- Pro only. Navigation Menu Lite has no Vertical Side Menu, and Plus Mega Menu comes with the Pro plugin.
- The menu needs a boxed container. The panel width is taken from the container’s inner (boxed) width.
- Check the mobile menu. On narrow screens, visitors get the mobile menu instead, with the panel content inside it.
Troubleshooting
The panel opens off the screen
Set Open Direction to the side the menu is on.
The panel is narrower than expected
The panel is limited to the width of the container the widget sits in. Widen that container, or its content width.
