Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

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

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

Fix hidden Divi dropdown 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;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

138 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

Comments By Others

  1. Will Howell

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  2. Damian Cook

    Hi. My problem was slightly different. The hamburger menu when selected opened the page links in a dropdown which was displayed below other elements. Changing the settings as you suggested within Divi did not work. What did work was targeting the .et_mobile_menu class and set position:relative;. There may be better ways to introduce the CSS but I used Divi customizer => additional CSS. I enjoy your posts.

    Reply
  3. Jeremy Evans

    Thanks man. That snippet at the end did the trick

    Reply
  4. Amy

    Thank you SO SO very much for this! This issue was driving me crazy – especially after messing with the z-axis and realizing it wasn’t fixing it! I’m using the Extra Divi Theme and I did end up needing the CSS code to fix it. Thanks again! I’m new to Divi and your blog has been so so helpful!

    Reply
  5. Akiko

    Thanks a lot for your help.

    I had been looking for hours.

    Thank you so much.

    Reply
  6. John

    Hi Nelson, great resource thanks but this one wasn’t working for me. My problem was with a MegaMenu – the mobile menu drop down would disappear behind the Divi Builder Footer. Inspecting the page I found that changing the z-index to auto fixed it for me – any other value from -500 to 9999 didn’t work. Adding the following CSS to the page (or the divi builder footer template) custom css seems to have fixed it. But would this cause other unforseeable bad consequences?

    .et_builder_inner_content {
    position: relative;
    z-index: auto;
    }

    Reply
    • Hemant Gaba

      Hi John!

      I’m glad the issue resolved for you. However, the class .et_builder_inner_content is common across for the header, body and footer. So you can use the following code instead of above one:

      header .et_builder_inner_content {
      z-index: 99999;
      position: relative;
      }

      Let me know how it goes!

      Reply
  7. Josh

    Not so fast Nelson Lee Miller! in my site I tried the 3 methods and it didnt work… take a look please!

    Reply
    • Hemant Gaba

      Hey Josh,

      Could you please elaborate on the issue a little more for better understanding?

      Reply
  8. KC Koushik

    The steps you didn’t work for me here, could you please check?

    Reply
  9. David Christopher

    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!

    Reply
  10. Alexander

    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!

    Reply
  11. Kat

    After trying many codes and settings for days, your code has worked. Thanks!

    Reply
  12. Narayan

    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.

    Reply
    • Hemant Gaba

      Hey Narayan,

      We are glad to know that our guide helped you. Please let me know if you need any further assistance.

      Reply
  13. Jamieson

    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?

    Reply
    • Sabine van Erp

      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!

      Reply
  14. Vanda

    Thank you! Saved my time and so many of my nerves 😀

    Reply
  15. Blair

    Hasn’t worked for me, I’m afraid but thank-you for providing a solution for others 😁

    Reply
    • Hemant Gaba

      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?

      Reply
  16. Tobias

    Made my day. You’re a hero. Thanks!

    Reply
  17. Barbi Larkins

    GOLD! I just wasted a half hour on Z-index. Your solution worked the first time!

    Reply
  18. Aline

    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 ?

    Reply
    • Hemant Gaba

      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?

      Reply
  19. Markus Hansen

    That’s awesome!

    Reply
  20. Nan Mc

    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.

    Reply
    • Hemant Gaba

      Could you please share the URL of the website where you are facing the issue so that I can have a look?

      Reply
      • Nancy Mc

        Hi, thank you, I furnished in the ‘website’ field of the comment form, did it not come through?

      • Hemant Gaba

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

  21. Tom

    This worked for. Thank you.

    Reply
  22. Marta Time

    Really, really thank you so much! Thought I was going crazy for this 😀

    Reply
  23. Jessica

    Thank you! The custom CSS solved my problem!

    Reply
  24. Jona Fridriksdottir

    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

    Reply
  25. Sheyna

    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*

    Reply
  26. Tania

    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.

    Reply
    • Hemant Gaba

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

      Reply
  27. Tee

    Is there a solution to the secondary menu drop down showing up behind the main header? Frustrating that Divi hasn’t fixed this.

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for us to investigate further?

      Reply
  28. Tom

    Worked for me. Thanks!

    Reply
  29. abby

    Thank you so much!! This is such an easy solution to a frustrating issue.

    Reply
  30. Dick Ockers

    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.

    Reply
      • Dick Ockers

        Thank you dear Nelson, will dive into that…. greethings

  31. Michael

    Thanks for this solution, my site’s drop-down menus were disappearing behind hero-sliders and this totally fixed the issue!

    Reply
  32. Johann

    Perfect , thanxx

    Reply
  33. Sue Grady

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

    Reply
  34. Marthine

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

    Reply
  35. Leo

    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.

    Reply
    • Jona

      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 😉

      Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  36. Paul Wood

    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!

    Reply
  37. steve@bluestamptravel.com

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

    Thanks for the vid.

    Reply
  38. Devon Miller

    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

    Reply
  39. Marc Passarelli

    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

    Reply
  40. Alan Russell

    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!

    Reply
  41. Jim

    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!

    Reply
  42. Alex Lp

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

    Reply
    • Krsnendu Knight

      Thank you this was the missing link.

      Love all your tips Nelson. They have helped me out on many occasions.

      Reply
    • Justin Cook

      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!

      Reply
    • Dean

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

      Reply
  43. Dawn

    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!
     

    Reply
  44. Ross

    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.

    Reply
  45. Sarah

    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!

    Reply
  46. Navneet Nair

    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

    Reply
  47. Charles

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

    Reply
  48. kevin palmer

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

    Reply
  49. Ryan

    Nelson for president!!!

    Reply
  50. Barrie

    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

    Reply
  51. Fab

    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!

    Reply
  52. Lit

    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.

    Reply
  53. Jahid Hasan

    Thank you so much.

    Reply
  54. Irene Wolk

    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!

    Reply
  55. Clement Lopez

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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 🙂

      Reply
      • Clement Lopez

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

  56. Eli

    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.

    Reply
      • Manish

        same for me it doesnt work on ios device means dropdown menu not showing in ios in andriod phones working smoothly.But in iOS device give me problem

      • Des

        I have also tried everything from the video/blog and the CSS snippet doesn’t work as well.

      • Hemant Gaba

        Hey Des,

        Could you please share the URL of the website for me to investigate the issue further?

  57. Alison

    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.

    Reply
  58. Christa Fossati

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

    Reply
  59. Mark

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

    Reply
  60. Stephanie

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

    Reply
      • Nancy Gray Smith

        I was excited to see this post because your tutorials are usually very helpful, but none of the procedures worked for me. I see that this was posted in 2020, and still no solution.

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        Hi Nancy,
        Your comment comes across as if something is wrong with our tutorial. The publish date is irrelevant in this case. You are welcome to contact Elegant Themes support.

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart