Do you want your dropdown menus to open only when visitors click? A click menu does not pop open by accident, which suits big dropdowns and mega menus.
With the Navigation Menu widget from The Plus Addons for Elementor, you can switch the dropdowns from hover to click with one setting.
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 plugin has a simpler widget, Navigation Menu Lite, which also has this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A header template. Add the widget to your site’s header so the menu shows on every page. Build the header with the free Nexter Builder or with Elementor Pro’s Theme Builder.
- A WordPress menu under Appearance > Menus, if you use the Default menu type.
Step 1: Set up the menu
Add the Navigation Menu widget to your header. In Layout, choose the Menu Type and Menu Direction, then pick or build your menu in Content.
Step 2: Choose Click Sub-Menu
In Content, set Menu Hover/Click to Click Sub-Menu. Menu Effects still sets how the dropdown appears.
Publish and click a menu item that has a submenu.
How It Behaves
- Clicking a parent item opens its dropdown and does not go to the parent’s link. If the parent is a real page, add it to its own dropdown too.
- Clicking the parent again, or anywhere else on the page, closes it.
- Opening one dropdown closes any other open one.
- Hovering does nothing, on every screen size.
Limitations
- One setting per widget. You cannot mix hover and click in the same menu.
- This setting is for the desktop menu. The mobile menu always opens submenus with a tap, whatever you choose here.
Troubleshooting
The dropdown still opens on hover
You are seeing a cached page. Clear the page cache, any CDN cache and your browser cache.
Clicking a parent item does nothing
Check that the item really has child items in the menu, and look in the browser console for JavaScript errors from another plugin.
