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

Last updated Jan 3, 2021 @ 12:25 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

108 Comments

  1. Stephanie

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

    Reply
  2. 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
  3. Christa Fossati

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

    Reply
  4. 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
  5. 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
  6. 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)

      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.

  7. 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
  8. Jahid Hasan

    Thank you so much.

    Reply
  9. 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
  10. 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
  11. 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
  12. Ryan

    Nelson for president!!!

    Reply
  13. kevin palmer

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

    Reply
  14. Charles

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

    Reply
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
    • Dean

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

      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
  20. 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
  21. 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
  22. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  23. 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
  24. 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
  25. 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
  26. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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
    • 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
  27. 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
    • Nelson Lee Miller (aka The Divi Teacher)

      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 πŸ™‚

      Reply
  28. Sue Grady

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

    Reply
  29. Johann

    Perfect , thanxx

    Reply
  30. sabine van erp

    THANK YOU!!!!!

    Thanks for sharing

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

  33. abby

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

    Reply
  34. Tom

    Worked for me. Thanks!

    Reply
  35. 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
  36. 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
  37. 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
  38. 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
  39. Jessica

    Thank you! The custom CSS solved my problem!

    Reply
  40. Marta Time

    Really, really thank you so much! Thought I was going crazy for this πŸ˜€

    Reply
  41. Tom

    This worked for. Thank you.

    Reply
  42. 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. πŸ™‚

  43. Markus Hansen

    That’s awesome!

    Reply
  44. 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
  45. Barbi Larkins

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

    Reply
  46. Tobias

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

    Reply
  47. 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
  48. Vanda

    Thank you! Saved my time and so many of my nerves πŸ˜€

    Reply
  49. 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
  50. 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

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart