Fixing the Non-Selectable Dropdown Item Bug in Elementor

You have built a navigation menu in Elementor, everything looks correct, the dropdown submenus appear on hover, but when you try to click a dropdown item, nothing happens. The cursor might not even change to a pointer. The link is there in the markup, the URL is correct, but the item is completely unresponsive.

This is one of the most common and most frustrating Elementor bugs. It has been reported across virtually every version of Elementor and Elementor Pro, across dozens of themes, and it consistently baffles site owners who can see the menu working visually but cannot interact with it. Here is what causes it and how to fix it.

What the Bug Looks Like

The symptoms are consistent. You hover over a parent menu item and the dropdown submenu appears. You move your cursor to the dropdown items and they are visible, the text is there, the layout is correct. But clicking does nothing. In some cases, the cursor remains a default arrow rather than changing to the pointer hand. In others, the cursor changes but the click does not register.

Sometimes only certain dropdown items are affected. The first item in a dropdown might work while the rest do not. Or items on the right side of a mega menu are unclickable while the left side works fine. Occasionally the entire dropdown is non-functional.

On mobile, the symptom manifests differently. Tapping a dropdown item may close the menu without navigating, or it may do nothing at all.

Why It Happens

The root cause is almost always an invisible element overlapping the dropdown menu. Something on the page, a section, a container, a widget, a pseudo-element, has a higher z-index or extends beyond its visible boundaries, and it sits on top of your dropdown items in the stacking order. You cannot see it, but it intercepts your clicks before they reach the menu links.

The most common culprits:

Adjacent Sections Overlapping

Elementor sections and containers can extend beyond their visible content area. A section directly below your header might have padding, a background overlay, or a shape divider that extends upward, covering the space where your dropdown appears. The section itself is invisible in that area, but it still captures pointer events.

Hero Sections With Overlays

A hero section with a background overlay (::before or ::after pseudo-element) often spans the full width and height of the section, including any area that overlaps with the header dropdown. The overlay has a higher stacking context and swallows clicks.

Z-Index Conflicts

Elementor allows you to set z-index on individual sections and widgets. If a section below the header has a z-index of 10 and the header dropdown has a default z-index, the section renders on top of the dropdown in the stacking context. The dropdown is visible because it is absolutely positioned, but the section’s invisible overflow area captures the clicks.

Shape Dividers

Elementor’s shape dividers add SVG elements to the top or bottom of sections. The top shape divider of the section below the header can extend upward into the header space, creating an invisible clickable layer over the dropdown.

Sticky Header Complications

When using a sticky or fixed header, the header is removed from the normal document flow. This changes the stacking context entirely and often causes the header’s dropdown to render behind subsequent sections rather than above them.

Solution 1: Fix the Z-Index (Most Common Fix)

The most reliable fix is ensuring your header and its dropdown have a z-index higher than everything else on the page.

Select the header section or container in Elementor. Go to Advanced > Layout (or Advanced > Custom Positioning depending on your version). Set the z-index to a high value:

z-index: 9999

This forces the header and all its children, including dropdown menus, above every other element on the page.

If you are using Elementor’s theme builder for the header, edit the header template. Select the outermost section or container and apply the z-index there.

If setting the z-index in Elementor’s interface does not resolve it, add custom CSS. Go to Customiser > Additional CSS or add it via a child theme:

header.elementor-location-header,
.elementor-location-header {
  z-index: 9999 !important;
  position: relative;
}

The position: relative ensures the z-index actually takes effect, z-index only works on positioned elements.

Solution 2: Fix the Overlapping Section

If the z-index fix does not work or you prefer to address the root cause, identify and fix the overlapping element.

Open your page in Chrome, right-click the non-functional dropdown item, and select Inspect. In the Elements panel, the inspector will highlight the topmost element under your cursor, and if there is an overlay issue, the highlighted element will not be your menu link. It will be whatever is sitting on top of it.

Once you have identified the offending element, you have several options:

Add pointer-events: none to the overlay. If the overlapping element does not need to receive clicks (such as a decorative background overlay), you can disable its click capture:

.offending-section::before,
.offending-section::after {
  pointer-events: none;
}

Reduce the section’s overflow. Add overflow: hidden to the section below the header to prevent it from extending into the header space:

.section-below-header {
  overflow: hidden;
}

Remove or reduce shape dividers. If the culprit is a shape divider, reduce its height or remove it and use CSS instead.

Solution 3: Fix the Dropdown’s Pointer Events

If you cannot easily modify the overlapping elements, you can force the dropdown to accept clicks by ensuring it has the correct stacking and pointer events:

.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown li,
.elementor-nav-menu--dropdown a {
  pointer-events: auto !important;
  position: relative;
  z-index: 10000 !important;
}

This is a brute-force approach and should be a last resort, but it works when the layering is too complex to untangle easily.

Solution 4: Check for Theme Conflicts

Some WordPress themes add their own header markup, styles, or JavaScript that conflict with Elementor’s navigation widget. If you are using Elementor’s Nav Menu widget inside a theme-provided header rather than an Elementor theme builder header, you may encounter conflicts.

Test with a default theme. Temporarily switch to Twenty Twenty-Four or another default WordPress theme. If the dropdown works correctly, your theme is the problem.

Use Elementor’s theme builder. Build your header as an Elementor template via Templates > Theme Builder > Header. This bypasses the theme’s header entirely and gives Elementor full control over the markup and styling.

Check for conflicting CSS. Inspect the dropdown in DevTools and look for any theme-applied styles overriding Elementor’s positioning or z-index. Theme stylesheets often include broad selectors that inadvertently target Elementor widgets.

Solution 5: Check for Plugin Conflicts

Other plugins can interfere with Elementor’s dropdown menus, particularly:

• Caching plugins that minify and combine CSS or JS, breaking Elementor’s dynamic class assignments
• Lazy loading plugins that modify the DOM in ways Elementor does not expect
• Other page builders or menu plugins that load competing navigation scripts

Deactivate plugins one at a time and test the dropdown after each deactivation. When the dropdown starts working, you have found your conflict. From there, check the conflicting plugin’s settings for compatibility options, or look for an alternative plugin.

How to Diagnose Similar Issues in Future

The underlying problem, invisible elements intercepting clicks, is not unique to Elementor or to dropdown menus. You will encounter it with modal triggers, button clicks, form submissions, and any interactive element that overlaps with another in the stacking context.

The diagnostic process is always the same:

1. Right-click and inspect the non-functional element. If the inspector highlights something other than what you clicked, you have found your overlap.

2. Check z-index values in the Computed panel of DevTools. Look at the stacking context of both the element you want to click and whatever is covering it.

3. Look for pseudo-elements. ::before and ::after are invisible in the normal page view but fully visible in DevTools. They are a frequent source of overlay conflicts.

4. Check for overflow: visible on parent containers. Elements can extend well beyond their visible boundaries when overflow is not constrained.

5. Use the Layers panel in Chrome DevTools (enable it in DevTools settings under Experiments). This gives you a 3D view of the page’s layer stacking, making overlap issues immediately obvious.

Preventing the Problem

A few habits will stop this bug from recurring:

Always set a high z-index on your header. Whether you are building with Elementor, a theme, or custom code, the site header should have a z-index well above any content section. Set it once in your header template and forget about it.

Constrain section overflow. Unless a section specifically needs visible overflow (for decorative elements extending beyond its bounds), set overflow: hidden as a default.

Test navigation after every layout change. Any time you add a new section, change a background overlay, or add a shape divider near the header area, test the dropdown menu immediately. Catching the issue while the cause is fresh in your mind is far easier than diagnosing it weeks later.

Use Elementor’s theme builder for headers. It provides the most consistent results and avoids the majority of theme conflict issues.

Still Stuck?

If you have worked through these solutions and the dropdown remains non-functional, the issue may be deeper, a JavaScript conflict, a corrupt Elementor installation, or a hosting environment problem. Fourseven Media works with WordPress and Elementor sites regularly and can diagnose and fix issues like this quickly.

Get in touch and we will get your navigation working properly.