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.
#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;
}
You are awesome, Nelson! Always bringing so much value!
Thanks Stephanie! I love doing this for the community!
I’ve had an issue with the Theme Builder Menu showing incorrectly for weeks – that last bit of code has fixed it! Thank you for your help, instant subscriber! 🙂
Hi Mark,
I know how you feel! I’m glad I was able to provide a solution!
Thank you so much for this post! The css code finally worked for me.
Hey Christa,
I’m very glad it did! I know for some that is the only thing that works, seems like hit or miss with the overflow settings.
You are amazing!!! Thank you so much. I also had this same problem specifically on pages that I customized with the Theme builder. Your code snippet did the trick for me.
Hi Alison,
I’m so glad this worked for you! Thanks for stopping by!
Hey Nelson, unfortunately this is not working for me. Tried the custom CSS and adjusting the advanced settings for the row. Any ideas? Website is listed in the form.
Hi Eli,
Can you point me to a specific page? Have you tried all the recommended solutions in the blog post and the video?
I have also tried everything from the video/blog and the CSS snippet doesn’t work as well.
Hey Des,
Could you please share the URL of the website for me to investigate the issue further?
Hi Nelson, greetings! Thanks for this post! I tried all these steps, including the code-snippet. Still, the dropdown not visible! Any way out? Thanks in advance!
Hi Clement,
I’m not sure! Usually these work for everyone. You can try using the tips I shared on the section, row, module as well. Other than that, contact ET and tell them to fix this once and for all 🙂
Thanks Nelson for responding! Yes, I am awaiting ET, after tried the options. Let us see.
Thank you s much – only the last solution worked for me. But I was at the point to give up 😉 Now I can work on my site and one problem is solved. You made my day – THANK YOU!
Hi Irene, I’m so glad it helped! You are very welcome!
Thank you so much.
You are welcome, Jahid, glad to help!
Thanks, man, the CSS worked for me. Unfortunately, steps 1 and 2 did not work and neither did what the Divi support suggested, which was the Z index you mentioned. Will definitely save the code for whenever this issue arises 🙂 Thanks again.
Sounds good, Lit,
Glad this helped!
Thanks a lot! the custom CSS Code actually work – 1st option didn’t — ET was not much of a help. Also the sticky header was not working and with your code everything is flow now. Thanks much!
Hi Fab, I’m so glad you found our solution! 🙂
Nelson, you are the Man!
Any chance of repeating the css for the footer menu including a white drop-down display please.
Many Thanks,
Barrie
Hi Barrie,
I wasn’t even aware of any issue with the footer. Do you have an example to show me?
Nelson for president!!!
Hahaha, best comment award! 🙂
This is great! As a newbie, it’s great having availability to great insights like these!
Hi Kevin,
That’s awesome, I love to help newbies so let me know anything you would like to see more of here!
Thanks a lot! “all else fails” worked for me!
Glad to here it, Charles!
Hi Mark,
Unfortunately for me its still not working.
Can you have a look and see what the issue is. Website is in the Form
I’ve checked your link and don’t see any issue with this. Maybe it is just cache on your end!
Thank you SO MUCH for this. This has been a problem for months for me and I’m not super techy but this explained it really well and fixed the issue instantly! Hooray!
That’s awesome Sarah! Thanks for letting me know, love that kind of feedback 🙂
This is day 1 for me for using the divi theme. Building my first header took me forever. I was ready to pack it in due to this menu issue. Thanks so much for helping us solve this painful issue.
Hi Ross,
Welcome to the world of Divi! I’m glad you found our blog, we have about 20 tutorials for the header for you to explore 🙂
I finally got it to work by putting your codes (from #1 and #2) in Column 2 of the Row (where my menu was sitting). Thanks for the help!
Interesting, Dawn, I’m glad you got it working!
Hi, thanks for your fixes, but they didnt work for me either. I contacted ET support and they gave me this code, it may help somebody else:
.et_pb_section_0_tb_header {
overflow: initial !important;
}
Thanks for sharing Alex!
This is the one that finally worked for me. Thank you.
WOW! Thank you so much for this code! This fixed it for me 🙂
I was feeling desperate after Nelson’s advice didn’t fix it…
Nelson, I love your articles and work btw. You have saved me quite a few times! Thanks for all you do!
Thanks a bunch Nelson! I was starting to think I was crazy but now I know I’m not the only one having this issue. Your fix worked but only after I did the same for the section as well as the row.
Keep up the awesome work – I love your tutorials!
Hey Jim, you are certainly not the only one. I havn’t met anyone yet who didn’t have this issue. Always happy to help!
Hey Nelson, thanks for all the tips & tricks (and your awesome Timer Pro!)
Nothing is working for me on this, but I’m trying to use menus as a “mulitbutton” under a text module. So maybe it’s a slightly different application? Anyways, I’m proper confused and thinking of giving up on the idea. You’re my last hope!
Thanks for taking a look!
Hi Alan,
The menus are working just fine for me! Are they behind the content for you? Could be a cache issue!
Hi Nelson,
Thank you for your post. I have been looking for a remedy to this issue for a while and well the right google search terms lead me to your site. Unfortunately it didn’t fix my dropdown menu on mobile — its still doesn’t work when I tried both types of fixes you posted.
Here is the site where I am having the problem. The dropdown menu actually works on my older iPad but on my iPhone11 the dropdown menu under Services only shows the hover (slightly darker blue square behind the hamburger menu) and no drop down appears, hence user cannot see pages.
https://axceleratecfos.com/
Thanks in advance for any help you can offer during these crazy times and your busy schedule.
Best,
Marc
Hi Marc,
I don’t own Apple products so I can’t check, but it sounds like it might be an unrelated issue as the dropdown menu appears on top of the content fine.
Hey Team, I’m new to website building. I have just built custom header and have been experiencing the problem where menus hidden behind content. I have tried to add the code and adjust z-index but not working. I may be doing thins wrong tho… Please help
Sure Devon, share the link and we can take a look.
I applied overflow to section, row and module and now it works. Maybe overkill but it has solved the issue!
Thanks for the vid.
Glad to hear you got it solved Steve!
I’ve been doing this stuff for a while now and using Divi for the last few years. However, I was completely stumped when a page from Divi Event Manger showed the text interspersed with the drop-down part of the menu on a client website I was building. In reality the words of the menu were just behind the content, but in front of the background. I couldn’t get anything to work and it was only on this one page, everything else worked perfectly. I tried a big z-index on all kinds of different parts of the header and menu, nothing worked. I came across this post and voila, the z-index tip did it! How on earth you found out what css to add it to I do not know, but I’m very glad you did! Much appreciation!
Hi Paul, it was a long and arduous process, but I’m so happy that my effort is helping so many people!
Nelson, thanks for those tips…this is so frustrating. I cannot for the life of me stop my menu from hiding behind my fullwidth section? I have done all that you said.
Hi Leo,
I have yet to hear of anyone who can’t get it after checking all the items I have here. So I don’t know except double check everything here and if not, see what ET has to say.
I am also having the same probelem…no matter what I do, it won´t change.
But Nelson, so so grateful for your advice. So well explained, although not working for me.
Just joined the FB group 😉
Hello Nelson ! I absolutely needed to tell you “THANK YOU”!
You nearly saved my life!
I’m presently working on setting-up my website and I was so discouraged about this header problem that I was getting stuck turning around to find and try any possible solution. And as I hated the way the standard WordPress header was following through the viewers width changes, I definitively wanted to stay with my own builder layout.
As you mentionned that we had to modify the advenced settings of the row and didn’t have any row as I had firt mounted it with fullwidth header section + fullwidth menu, I decided to replace it with standard section + row + menu and adjusted the width differently, to make it fullwidth (100vw).
After that, I modified the overflow and position in advanced row settings. Unfortunately, this first solution didn’t correct the problem but your second solution with coding in CSS did!
It’s been sooooo long since I was trying to find the solution !!!
So a BIG, BIG THANK YOU again!!!
Hi Marthine,
You are welcome! Thank you for sharing your experience and process. So glad to hear you have solved this! It makes me happy to hear success stories 🙂
That’s fantastic! I spent way too much time with the z-index not resolving this issues. Thank you!
I hear ya! I’m so glad you got this solved!
Perfect , thanxx
You’re welcome, Johann!
THANK YOU!!!!!
Thanks for sharing
You’re very welcome!
Thanks for this solution, my site’s drop-down menus were disappearing behind hero-sliders and this totally fixed the issue!
Nice Michael, so happy to help!
Dear Nelson, you somehow are like a big brother with good working advices. For most of the pages your advices work, however I have on page where it does not work! I discovered why. I have a row what is “sticky to top” and that goes over my dropdown… do you have a hint for me…. thank you for your teachings.
Hi Dick,
I’m not sure what you mean exactly, sorry! But it sounds a lot of z-index, so try adjusting that.
Thank you dear Nelson, will dive into that…. greethings
Thank you so much!! This is such an easy solution to a frustrating issue.
That’s great Abby, so happy to help solve this issue!
Worked for me. Thanks!
You’re welcome, glad it worked!
Is there a solution to the secondary menu drop down showing up behind the main header? Frustrating that Divi hasn’t fixed this.
Could you please share the URL of the page for us to investigate further?
Hi Eli! Is this also supposed to work for the Divi Secondary Menu dropdown? I don’t want to have to create a new section and row for my navigation menu. I’d rather use the secondary menu already there.
We have never tried this using the Secondary Menu but if you have tried and if you are facing some issues so please share the URL of the page and describe the issue and we will definitely help you in resolving that. 🙂
Thank you — this worked for me! I didn’t have a row to configure because I had two full-width modules within a section (one header/menu and one main content), but it worked on the full-width module containing the header and menu. *happy dance*
I’m glad to hear it worked out!
Nelson, I am so thankful that you exist!
This DIVI menu was driving me crazy! I used all your advice up here, as well as other CSS from the web. Nothing worked. I deleted it. Now using your amazing instructions: how-to-add-icons-to-the-divi-menu.
Nelson, sharing so much with us for free is so appreciated. I am sure you are breaking the record of Karma points (somewhere).
Drop me a line if you come to Iceland. Best, Jóna
It is really great to hear your appreciation! I’m happy that my content is helpful. By all means, I would love to come to Iceland!
Thank you! The custom CSS solved my problem!
That’s great Jessica!
Really, really thank you so much! Thought I was going crazy for this 😀
You’re welcome! 🙂
This worked for. Thank you.
You’re welcome!
Such a mystery! 1 & 2 didn’t work, 3 overlays the body section which undoes the effect I’m trying to achieve. I am checking with ET support abut s well, if you get a moment to take a look that would be super 🙂
I have gotten so much great info from your site—continued thanks for sharing so much of your expertise.
Could you please share the URL of the website where you are facing the issue so that I can have a look?
Hi, thank you, I furnished in the ‘website’ field of the comment form, did it not come through?
Apologies for the confusion. I got the URL and I guess the snippet given below is causing the problem to the Menu:
header .et_builder_inner_content {
z-index: -500!important;
}
Because the value of the z-index is -500 the menu is not getting opened when clicked. Could you please edit this snippet and change the value to 2 or 3 and see if that helps?
Please let me know how it goes. 🙂
That’s awesome!
Glad you like it!
Hi Nelson !
Thanks for the tip ! the CSS code solved a part of my problem but I don’t understand why it doesn’t on some of my blog’s categories. Well, it works fine on desktop but not on mobile… it is so frustrating….
Maybe you can take a look at http://www.creee.org. it is in french, but you still can see the problem
I have read all the comments and it seems that i’m not the only one to have this kind of issue…
Do you have any solution that appears since you find those ?
Hi Aline,
I have checked the URL provided and I am not able to spot any issue on any screen size. Could you please try using a different browser or device and see if that helps?
GOLD! I just wasted a half hour on Z-index. Your solution worked the first time!
That’s great, I’m so glad!
Made my day. You’re a hero. Thanks!
That’s great, you are welcome!
Hasn’t worked for me, I’m afraid but thank-you for providing a solution for others 😁
Hey Blair,
I have investigated the website and haven’t spotted any issue on my side. Could you please check and on any other browser and see if that helps?
Thank you! Saved my time and so many of my nerves 😀
I’m so glad to hear that!
I really enjoy your content Nelson.
This walkthrough hasn’t solved my problem atm. my menu is still scrolling behind all my elements.
Could someone help?
Thanks a lot Pee Aye,
First it did not work, but then I discovered I had to make the adjustment in the settings INSIDE the Column.
I had 1 column in the row, and did change the setting inside that 1 column.
Then it worked.
I am a big fan of you!
I’m glad to hear that!
Thank you so much! I had to do the changes in the menu module as well as the section also for this to work. This is a great help in solving what was truly vexing.
Hey Narayan,
We are glad to know that our guide helped you. Please let me know if you need any further assistance.
After trying many codes and settings for days, your code has worked. Thanks!
That is great to hear!
Had this exact same problem. Tried everything you said but didn’t work. Then I tried changing the settings as you mentioned, but on the section instead. And Presto! I worked. Thanks so much!
That’s great to hear!
Same problem too. But only on the blog template not pages.
Tried the row settings suggestion didn’t work for me.
Tried the section settings suggestion (per one of the comments) didn’t work for me either.
The CSS code worked though.
I have gone back to Elegant Themes on this issue as we should have to be using CSS code to fix this bug.
Thanks, Nelson – I encounter many issues on Divi and when I search for a solution your posts always appear with the answer.
Keep up the great work!
So glad to hear it worked! 🙂
The steps you didn’t work for me here, could you please check?
You should contact Elegant Themes support.
Not so fast Nelson Lee Miller! in my site I tried the 3 methods and it didnt work… take a look please!
Hey Josh,
Could you please elaborate on the issue a little more for better understanding?
Thanks a lot for your help.
I had been looking for hours.
Thank you so much.
You’re welcome!