A click-to-open dropdown stays shut until a visitor asks for it. It behaves the same on a desktop mouse and on a touchscreen, and it stops submenus appearing every time the cursor drifts across the header.
The free Navigation Menu Lite widget in The Plus Addons for Elementor switches to this with one setting, Menu Hover/Click.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu Lite 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: Free — Navigation Menu Lite is part of the free The Plus Addons for Elementor plugin. Every setting described here, including Menu Content > Template Menu, works without the Pro plugin; this was checked with Pro deactivated.
- Not the same widget as Navigation Menu: Navigation Menu is a separate widget in The Plus Addons for Elementor Pro. It is the one with mega menus, a sticky header menu, off-canvas and swiper mobile menus and per-item icons and labels. Navigation Menu Lite has none of those. If the panel header says Edit Navigation Menu Lite, this is the free widget. The LIVE WIDGET button above opens the Pro Navigation Menu demo, since the Lite widget has no demo page of its own.
- Widget to enable: TP Navigation Menu Lite, switched on under The Plus Addons > Widgets. In the Elementor panel it appears as Navigation Menu Lite.
- You need a WordPress menu: build it first under Appearance > Menus. The widget does not hold menu items of its own, it renders a menu you have already created. On a block theme (such as Twenty Twenty-Five) WordPress hides Appearance > Menus; open /wp-admin/nav-menus.php directly, or use a classic theme, or build the menu in the Site Editor instead.
- Your menu needs at least one submenu: under Appearance > Menus, drag an item slightly to the right under another item so it becomes a child.
Steps
- Select the Navigation Menu Lite widget and open the Navigation Bar section. Leave Menu Type on Default and pick your menu in Select Menu. (Menu Type chooses between a WordPress menu and a repeater — it is not where you pick the menu.)
- Open the Extra Options section and set Menu Hover/Click to Click Sub-Menu.
- Under Style > Main Menu, set Main Menu Indicator Style to Style 1. Without an arrow nothing tells a visitor that an item is clickable for a dropdown.
- Update the page and click a parent item on the front end. The submenu slides open and stays open until you click the item again or click anywhere outside the menu.
Settings Used Here
| Setting | Where | What it does | Default |
|---|---|---|---|
| Menu Hover/Click | Content > Extra Options | Click Sub-Menu opens a dropdown on a click and keeps it open; Hover Sub-Menu opens it with the cursor. | Hover Sub-Menu |
| Main Menu Indicator Style | Style > Main Menu | Adds an arrow to items that have a submenu, so visitors know what to click. | None |
Menu Effects does nothing in this mode. Both of its styles are read only by the hover code, so with Click Sub-Menu the panel always slides open over about 0.4 seconds whichever style is selected.
How It Behaves
- Clicking a parent item opens its submenu. Clicking the same item again closes it.
- Opening one dropdown closes any other dropdown that was open in the same menu.
- Clicking anywhere outside the menu closes the open dropdown.
- A parent item that has children never navigates to its own link, on any click. The widget cancels the link so that the click can open the panel instead.
- The setting applies to the whole widget, not to individual menu items.
Limitations
- You cannot mix click-opening and hover-opening items in one widget.
- The parent item’s own page becomes unreachable from the menu. Add it as the first link inside its own submenu — an “Overview” or “All Services” entry — if visitors need to get there.
- Menu Effects has no effect here, so the open and close animation cannot be changed.
- There is no setting to keep a dropdown open on the page its child item points to.
Troubleshooting
Clicking Services opens the dropdown instead of loading the Services page
That is how this mode works, and a second click will not navigate either — it closes the panel. Put the parent page in its own submenu as an explicit link, or switch that item to have no children.
Nothing happens when I click
Check that the item has child items under Appearance > Menus. An item with no children is a plain link and keeps working as one.
The dropdown opens and closes again immediately
Another script on the page is handling the same click. Disable other menu, popup or animation plugins one at a time to find it, and clear any page or CSS cache between tests.
It works on a wide screen but not on a narrow one
Dropdowns only run above 991 px of browser width. If you lowered Open Mobile Menu below 991, the widths in between show the desktop bar with no working dropdown. Keep Open Mobile Menu at 991 or higher.
