Struggling to make your Elementor submenu open on click instead of hover? This common issue can leave your website’s navigation feeling clunky and unfriendly, especially for mobile users.
But don’t worry. You don’t need to buy expensive plugins or mess with complicated code.
In this guide, you’ll discover a simple, free method to create a user-friendly, clickable dropdown menu in Elementor.
Let’s get started!
Why Open Submenus on Click?
Opening submenus on click significantly improves your site’s usability, especially for visitors on touch devices.
Hover-based menus often don’t work well on mobile, but a click-to-open menu ensures everyone can easily access your navigation.
What You’ll Need
To follow this tutorial, make sure you have:
- WordPress installed
- Elementor page builder (free version is enough)
- The Plus Addons for Elementor plugin (free version)
- A menu created in WordPress
How to Open Elementor Submenu on Click [Step-by-Step]
1. Install The Plus Addons for Elementor
First, install and activate the free version of The Plus Addons for Elementor. This plugin comes with a handy widget called Navigation Menu Lite.
2. Create Your WordPress Menu
If you haven’t already, go to Appearance > Menus in your WordPress dashboard and set up your navigation menu, including any submenus you want to display.
3. Add the Navigation Menu Lite Widget
- Open your header template in Elementor.
Tip: You can use the free Nexter Builder to create a header template, or use Elementor Pro if you have it.
- Drag and drop the Navigation Menu Lite widget into your header section.
4. Configure the Widget Settings
- Menu Direction: Choose the direction you want your menu to appear (horizontal or vertical).
- Menu Type: Select the menu you created in WordPress.
- Menu Hover/Click: From this dropdown, select Click Sub-Menu. This setting ensures your submenu will open only when a user clicks on the parent menu item.
- Menu Effects: Pick your preferred dropdown animation for a more dynamic look.
5. Save and Preview
Once you’ve set everything up, save your changes and preview your site.
Now, your Elementor submenu will open on click, providing a seamless experience across all devices.
Wrapping Up
You don’t need complex coding to create a clickable submenu in Elementor. With The Plus Addons for Elementor’s Navigation Menu Lite widget, you can easily enhance your website’s navigation for free.
Try it out and make your site more user-friendly today!
