Fix Theme Builder Dropdown Menu Hidden Behind Page Content
A Solution To A Persistent Problem
If there was one problem that has plagued me the past few months, it’s this. The Theme Builder is awesome, and I use it and abuse it. But every since Divi 4.0 was released, there was a bug with the menu dropdown and also the mobile menu being completely hidden behind the page content. In the first few months, Elegant Themes released a fix for the z-index, but I know from several developers that the issue is still ongoing and is under consideration as to how to best approach it. I got tired of waiting.
I had child themes ready to publish to my store but I kept finding myself waiting on support to fix this.
NOTE: The changelog of 4.4.2 says it fixed a z-index issue with the header. Can anyone confirm? I’m skeptical because this the 4th time they said they fixed it and hadn’t yet.
And no, it is not as simple and changing the z-index in the section or module. I see that answer continually in the Facebook groups, and I have to wonder if those people actually use the Theme Builder or if they are basing it rather on what should work. What should work is not always what does work.
What I’m sharing here is a super easy solution to something that has been a big pain to me. I’m going to show you how to fix the hidden Divi Menu module dropdown in the Theme Builder.
▶️ Please watch the video above to get all the exciting details! 👆
#1. Set Row Overflow To Visible
The first thing you need to do is actually not in the Menu module, but rather in the row. I tried changing this for the module, column, and section, and it only works with the row. Go figure!
To do this, go to the Row Settings and the Advanced tab. In the Visibility toggle, change Horizontal Overflow and Vertical Overflow to “Visible.”
#2. Set Position To Relative
The next important step is to make sure the position of the row is set correctly. In the same row settings, find the Position toggle. This may or may not already be set correctly, but just make sure this is set to “Relative.”
Those two settings solved it for me! All my z-index settings are at default 0, so again, it’s not a z-index as many are claiming. But then again, whatever works! If that solves it for you, I’m more than happy to say there are more than one solution. I’d be curious to hear what works for you, so leave me a comment and let’s discuss this in The Divi Teacher Facebook group!
When All Else Fails…
The solution I gave above works in all cases that I have encountered except one very specific case. In our #1 popular child theme, Divi LMS for LearnDash, I have the course pages built with the Divi Theme Builder. For the life of me, I couldn’t get those specific layouts to work, the dropdown menu and mobile menu always went behind the Course template. So the only thing left to do was override it with some CSS.
If you find yourself in a similar situation, you can try placing the following code snippet in your Divi>Theme Options>Custom CSS box.
header.et-l.et-l--header {
z-index: 99999;
position: relative;
}
Another big THANK YOU to let you know that after tearing my hair out on this a search led to your post and the CSS fixed it for me. The overflow option didn’t work. Should have thought to look at your blog first. ;-).
Kim
You’re welcome Kim, so glad you came here to our site!
HI I am hoping you may be able to help with this annoying issue we have on a client’s site, when the resolution of the device changes and the menu changes to two lines, the drop downs wont let you reach them as it is hovering over another menu item, we never designed this site and had never used Divi until now, any help you could give would be greatly appreciated
Hi Will,
I’m not sure what you mean, but I think your question is not related to this tutorial but more of a general customization question, which would be better asked on a place like a Divi Facebook group.
THANK YOU!!!!!
Thanks for sharing
You’re very welcome!