Code by Day | Explore By Weekend

How To Fix The Hidden Divi Menu Module Dropdown In the Theme Builder Tutorial by Pee-Aye Creative

How To Fix The Hidden Divi Menu Module Dropdown Submenu and Mobile Menu In The Theme Builder

This quick tutorial will show you how to fix and show the hidden Divi menu module dropdown and mobile menu 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.”

Fix hidden Divi dropdown menu

#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.” 

show Divi theme builder drowdown menu

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;
}
53
Last updated Jan 3, 2021 @ 12:25 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
60 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Stephanie
11 months ago

You are awesome, Nelson! Always bringing so much value!

Mark
11 months ago

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! 🙂

Christa Fossati
11 months ago

Thank you so much for this post! The css code finally worked for me.

Alison
11 months ago

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.

Eli
Eli
10 months ago

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.

Clement Lopez
Clement Lopez
10 months ago

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!

Clement Lopez
Clement Lopez

Thanks Nelson for responding! Yes, I am awaiting ET, after tried the options. Let us see.

Irene Wolk
9 months ago

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!

Jahid Hasan
Jahid Hasan
9 months ago

Thank you so much.

Lit
Lit
9 months ago

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.

Fab
Fab
9 months ago

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!

Barrie
9 months ago

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

Ryan
9 months ago

Nelson for president!!!

kevin palmer
kevin palmer
9 months ago

This is great! As a newbie, it’s great having availability to great insights like these!

Charles
Charles
9 months ago

Thanks a lot! “all else fails” worked for me!

Navneet Nair
8 months ago

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

Sarah
8 months ago

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!

Ross
7 months ago

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.

Dawn
Dawn
7 months ago

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!
 

Alex Lp
Alex Lp
7 months ago

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;
}
 

Dean
Reply to  Alex Lp
19 days ago

This is the one that finally worked for me. Thank you.

Jim
Jim
7 months ago

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!

Alan Russell
6 months ago

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!

Marc Passarelli
6 months ago

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,… Read more »

Devon Miller
5 months ago

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

steve@bluestamptravel.com
5 months ago

I applied overflow to section, row and module and now it works. Maybe overkill but it has solved the issue!

Thanks for the vid.

Paul Wood
4 months ago

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… Read more »

Leo
Leo
4 months ago

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.

Marthine
4 months ago

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… Read more »

Sue Grady
3 months ago

That’s fantastic! I spent way too much time with the z-index not resolving this issues. Thank you!

Johann
2 months ago

Perfect , thanxx

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart