If an Elementor dropdown opens but sits behind a hero or disappears at a container edge, raising the menu's z-index may not solve it. Check whether the menu is underneath a separate stacking context or clipped by an ancestor. Those require different fixes.
First confirm that the menu actually opens
Click or tap the control and inspect its expanded state and dropdown element. If there is no open state, follow the Elementor dropdown interaction guide. This article addresses a visible or expanded menu whose contents are covered, cut off or unreachable.
Record the page URL, viewport width, scroll position and whether the header is sticky. A menu that fails only after scrolling is strong evidence to inspect the sticky header's state, not proof that a plugin must be deactivated.
Distinguish two visual patterns
| Pattern |
Likely inspection target |
Useful first experiment on staging |
| Hero appears over the dropdown |
Header and hero ancestor stacking contexts |
Compare the sibling context levels |
| Menu stops exactly at a box boundary |
Ancestor overflow or clipping rule |
Temporarily remove the clipping constraint |
| First items show, lower items cannot be reached |
Height, clipping and scroll behavior |
Test a bounded scroll area for the menu |
| Desktop works, mobile fails |
Responsive layout and mobile container |
Inspect the mobile element, not desktop settings |
MDN explains that a stacking context is handled as a unit within its parent. An enormous child z-index cannot escape a lower ancestor context. MDN's overflow reference separately describes clipping behavior. That is why changing one number can have no effect.
Expanded state: Menu actually opens. Stacking: Inspect header and hero parents. Clipping: Check exact cut-off boundary. Interaction: Reach the final menu item. Explanatory checklist, not a customer test result.
Adjust the responsible container
Use the browser's computed styles to walk from the dropdown toward the header root. Look for positioning, z-index, transforms and overflow. Note the existing rules before changing anything. A transform added for animation can be relevant even when nobody intentionally configured a stacking layer.
Elementor's z-index instructions place the control in different locations for different editor generations: V4 Style and Position, or V3 Advanced and Layout. Confirm the editor in front of you. Set a deliberate relationship between header and page content instead of applying a global high z-index to every widget.
Do not remove overflow everywhere. It may keep a slider or decorative section from breaking the page width. Change the narrow responsible container, or restructure the menu so it is not inside that clipped region.
Test interaction, not only appearance
At mobile width, open the menu with the keyboard and reach its last item. Check nested links, close behavior and the sticky transition. Confirm the dropdown does not cover a necessary close control or trap page scrolling after dismissal.
For a layout repair, provide the ancestor rule that changed and before-and-after captures at the failing width. That makes the fix reproducible and avoids replacing a precise container problem with a site-wide CSS override.
References reviewed October 14, 2026. Examples are explanatory, not customer test results.