--- title: "How to Open Dropdown on Click in Elementor?" url: https://theplusaddons.com/docs/open-dropdown-on-click-in-elementor/ date: 2023-10-27 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Open-Dropdown-on-Click-in-Elementor_-1024x536.jpg word_count: 406 --- # How to Open Dropdown on Click in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget switches dropdowns from hover to click with one setting in Content by choosing Menu Hover/Click to Click Sub-Menu. - Click Sub-Menu opens a parent item’s dropdown, blocks the parent link, closes when the parent is clicked again or when the user clicks elsewhere, and closes any other open dropdown. - Navigation Menu has limits: one setting per widget, desktop only for this option, and the mobile menu always opens submenus with a tap. 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](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) Table Of Contents ## 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](https://nexterwp.com/docs/nexter-theme-builder-explained/) 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. ![Click Sub-Menu selected in the Menu Hover/Click dropdown](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-click-sub-menu-selected-in-the-menu-hover-click-dropdown.webp) Publish and click a menu item that has a submenu. ![A dropdown opening after a click on the published page](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-click-sub-menu-demo.gif) ## 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. ## Related Docs - [Navigation Menu widget: settings overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/)- [Open the dropdown on hover](https://theplusaddons.com/docs/open-dropdown-on-hover-in-elementor/)- [Mega menu examples (blog)](https://theplusaddons.com/blog/best-mega-menu-examples/) ## Frequently Asked Questions **Q: What do I need before I can open a dropdown on click in Elementor?** A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor, and it needs to be installed and activated. The page also calls out a Pro edition requirement for the Navigation Menu widget, while the free plugin has Navigation Menu Lite with the same option. For a real header setup, the menu should live in a header template, and a WordPress menu is needed if you use the Default menu type. **Q: How do I make an Elementor dropdown open on click instead of hover?** A: The key setting is Menu Hover/Click, which you switch to Click Sub-Menu inside the Navigation Menu widget. That changes the trigger from hover to click without changing how the dropdown is styled, because Menu Effects still controls how it appears. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this single setting to stop accidental opens on larger menus and mega menus. **Q: Why is click better than hover for big dropdown menus?** A: Click is safer for large navigation because it prevents dropdowns from popping open by accident. That matters most when the menu has big dropdowns or mega menus, where a stray mouse movement can get in the way of browsing. In this setup, hovering does nothing on every screen size, so visitors only open submenus when they intentionally click. **Q: What happens when someone clicks a parent menu item with a submenu?** A: Clicking a parent item opens its dropdown and does not take the visitor to the parent link. If that parent is also a real page, it should be added inside its own dropdown too. The behavior is consistent: clicking the parent again or clicking anywhere else closes it, and opening one dropdown closes any other open one. **Q: Why does my dropdown still open on hover after changing the setting?** A: A cached page is the usual reason this happens. The page specifically points to clearing page cache, CDN cache, and browser cache so the old hover behavior stops showing. That matters because the setting may already be correct in Elementor while visitors are still seeing an older cached version of the header. **Q: Does click-to-open work on mobile menus too?** A: The mobile menu always opens submenus with a tap, whatever you choose for the desktop menu. That means this setting is really about controlling desktop behavior, not changing how touch navigation works. The page also notes that you cannot mix hover and click in the same menu because there is only one setting per widget.