When a dropdown opens but you can only see part of it, or you can't see it at all, the cause is almost always one of two things: the dropdown extends past a parent container that's clipping it, or it renders correctly but sits behind another element on the page. This article shows you how to identify which one is happening and how to fix each in Divi 5.
Diagnose what's actually happening
Hover over a parent menu item (on desktop) or tap the hamburger icon (on mobile) and look closely:
The dropdown opens but gets cut off at an edge. You can see the top items but the rest is sliced off where the header ends. This is an overflow clipping problem.
The dropdown opens but is partially or fully invisible. You can sometimes see text from the page bleeding through the menu, or the dropdown doesn't appear at all. This is a z-index stacking problem.
The two fixes are independent, so apply them in order. If your dropdown has both symptoms (cut off at the edge AND ghostly), you'll need both.
Fix 1: Let the dropdown overflow its parent container
When a parent Section, Row, or Column has its overflow set to Hidden, anything that extends past that element's box gets clipped. Dropdown menus extend below the menu module, so a header section with hidden overflow will slice the dropdown off at the bottom edge.
Open your header template in the Theme Builder, or open the page in the Visual Builder.
Click the Section that contains your Menu module.
Go to the Advanced tab.
Open the Visibility option group.
Set Horizontal Overflow and Vertical Overflow to Visible.
Repeat the same check on the parent Row and Column if the dropdown is still clipped.
Note: Don't change the overflow on a deeply nested element if the clipping is happening at the section level. Work outward from the Menu module to the section, fixing only the elements that actually need it.
Fix 2: Raise the dropdown above page content
If the dropdown opens at full size but disappears behind content below the header, the page content is sitting on a higher stacking layer than your menu. Increase the menu's stacking order to bring it forward.
Click the Section that contains your Menu module.
Go to the Advanced tab.
Open the Position option group.
Set Z-index to a high number like
100,999, or9999.Save your changes.
If the dropdown is still hidden, the culprit is usually another section pushing itself up the stack.
Watch out for Scroll Effects on the first content section
A common source of z-index issues is the Scroll Effects option group applied to the first section below the header. When a section has a sticky position or a transform effect, the browser promotes it to its own stacking layer, which can push it above the header menu even though it appears lower on the page.
Click the first Section below your header.
Go to the Advanced tab.
Open the Scroll Effects option group.
If Sticky Position is set, or if any Scroll Transform Effects are active, the dropdown will likely stack behind them.
Either disable the effect, or open the section's Position option group and set Z-index to
0so the header's higher z-index wins.
💡Pro tip: If you want to keep both the scroll effect and the dropdown, just make sure the header's Z-index is always higher than any section that uses Scroll Effects on the page.
Still not working?
If neither fix solves the problem:
Clear the Divi 5 CSS cache via Divi → Theme Options → Clear CSS Cache in the top right, then reload in an incognito window.
Enable Safe Mode under Divi → Support Center to rule out a plugin or custom code conflict.
Check Divi → Theme Options → General → Custom CSS for rules that set
overflow: hiddenon.et-l-header,.et_pb_menu, or any related selectors. These will clip the dropdown regardless of your Visibility settings.