[BLACK FRIDAY DEAL] First 100 Memberships With 50% Discount! 👉Get This Deal
Mark Hendriksen Logo

Divi Mobile Menu Not Working And How To Fix It

Mark Hendriksen | April 24, 2021 | 90 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

You click on the hamburger icon and it looks like the mobile menu is hidden behind your top section. Does this happen to you? In that case, I have a couple of solutions for you.

Solution #1 update Divi

First, try to update Divi and see if that solves your problem. Divi constantly comes with updates for bug fixes so this just might do the trick.

Solution #2 set the overflow to visible

If you are using a Global Header in Divi > Theme Builder then go there and open the row where your menu module is. Go to the Advanced tab > Visibility set the horizontal and vertical overflow to visible.

Divi set overflow to visible

Then under position set the Position to Relative.

Set row position to relative in Divi

Solution #3 turn safe mode on

Go to Divi > Support Center and enable safe mode. In safe mode, all plugins and Divi child themes will be disabled. Now check again if your mobile menu is working. If it is working then likely one of your plugin or child themes is conflicting with the mobile menu. Turn safe mode off and disable your plugins one at a time to check which one is causing the issue.

Turn safe mode on in Divi

Solution #4 ask me

If the above solutions did not work then let me know in the comments with a link to your site and I will take a look at it.

You might also like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

90 thoughts on “Divi Mobile Menu Not Working And How To Fix It”

      • Hi, can you share your solution? I’m working on a site where the mobile menu has collapsable menus. The sub-menu links work but the parents do not. Any suggests would be great! I already checked that the Disable top tier dropdown menu links is disabled.

        Reply
  1. I’ve inherited a website – klscarves.com and for the life of me can’t get the menu bar to appear on mobile view.

    I’ve entered safe mode but no change. Any suggestions?

    Reply
  2. Hello!

    I did a super simple build here: http://www.eldonspainting.com but the mobile menu doesn’t work when viewed on a mobile device. The hamburger is there, and I can see that the menu drops down, but it’s tucked behind the content on the page. I’ve adjusted the overflows, and made the position relative. It didn’t work. I tried it in safe mode, but it didn’t change anything.

    What do I do???

    Thank you. 🙂

    JM

    Reply
  3. Hi, thank you for the article. My problem is that I have a one page website. When I click on my menu items it just scroll up and down the page. On desktop this works great but on mobile it doesn’t work at all. I have added the css ID to both desktop and mobile versions. Website is a dev site. https://zingitdev.co.za

    Reply
  4. The main menu wasn’t working on mobile. Strangely, the hamburger menu was only broken on the landing page, where an “a” appeared in place. Solution #2 fixed it. Thank you!
    (helenakorpela.com)

    Reply
    • Hi Anthony,

      Did you have a Divi update?

      It seems you are using 2 menus, one for desktop and one for mobile. try to disable the mobile one and only use the desktop one (make this one also visible for mobile).

      Reply
      • I delete the mobile one but nothing change. I have trying all the things in your article. And i don’t have a divi update in my dashboard. There is an other way to upgrade ?

        Reply
      • Until i have put lite speed cache and wp all in one security, i have this problem, and other, like module of divi plus wich doesn’t work…

        Reply
  5. Hello,

    I am having the same issue on my website and have been unable to resolve it through different solutions online. Can you please help! It would be greatly appreciated.

    Website: https://trucesoftware.com

    Thank you very much!

    Reply
    • Hi Connor,

      I checked your website on my mobile, but it is working on my end.

      What does not work for you?

      Reply
  6. Hi there! The hamburger menu on the home page of williams.wp.gravityadmin.com is working properly, but on the interior pages (Get A Quote, Free Consultation), it’s hidden behind the content on the page. Any recommendations/help to fix it?

    Reply
    • Hi Stephanie,

      Sorry for the late reply. I checked your site and it seems you have fixed it I do see the hamburger menu.

      Reply
    • Hi Matt,

      I see the following issue: when you open the mobile menu it collapses but when you close it, it redirects to the home page.

      You created a 2 column structure and then pushed the menu with a – margin in position so it sits on one line with your logo.

      I think this is where it goes wrong.

      Try to make a one-column structure and place the logo in your menu module.

      Reply
  7. We have discovered an issue with the Divi theme when on mobile. The header menu items (linked to just “#”) which should expand to show the sub-menus don’t go anything and the “+” signs don’t appear on the navigation – UNLESS – you are logged into the wp-admin. If logged in, the nav works great. If not, it’s not working.

    Here’s the site: https://wfw.org
    These items should all have sub-menus:
    About
    Our School
    Enroll Now
    Ways to Support

    Please help!

    Reply
    • Hi,

      I checked your site.

      The + symbol does show up for me on mobile.

      Is this collapsing mobile menu code from my tutorial or a different one?

      Reply
    • Hi Rob,

      Try the safe mode feature in Divi. Go to Divi > Support Center and activate Safe mode.

      If your menu is working then it is likely one of your plugins that is causing this or perhaps you are using some additional code?

      Reply
  8. I was able to fix the problem by turning off the Defer jQuery and jQuery Migrate button on Divi > Theme Options > General > Performance.

    Reply
  9. Hi Mark,
    I can not get my mobile/tablet menu to drop. I tried everything. I have an updated version of WordPress and Divi I unactivated all plugins to no avail. The site is https://beta.gich.com. Thank you for any advice you can give.
    Happy New Year!
    Tina

    Reply
  10. Howdy, Mark! I seem to be having the same problem, despite trying all of the above solutions. It works when safe mode is turned on, but I haven’t changed anything. My site is at http://www.as-voicestudio.com.

    The mobile menu doesn’t scroll, and although the desktop menu appears when you’re at the top of the page, if you scroll down even slightly, the dropdowns won’t appear. Thanks in advance for your time and assistance!

    Reply
    • Hi Alex,

      Are you using a plugin for your menu? I notice when you scroll down, the menu disappears.

      Are you doing that with a plugin or with some custom code?

      It seems to me that is causing your issue. And would also make sense that when you enable safe mode it is working.

      Reply
  11. Hi everybody. The script is brilliant. Thanks a lot.
    But, I have a special constitution in the links, and the script won’t change the page with anchors in it….. please help.

    Example:
    In desktop version everything works fine.
    In mobile version the menu is fine, too. But I have links with anchors:
    https://www.naturheilpraxis-gudra.de/wechseljahre/#angebot
    The next link in the menu is like that:
    https://www.naturheilpraxis-gudra.de/kinderwunsch/#angebot

    If you are in the first page “wechseljahre” and you want to go to the second page “kinderwunsch”, the browser just scroll to the anchor “angebot” on the SAME page – without changing to “kinderwunsch”….

    All the best and thanks for the script, at all…..
    Stefan

    Reply
    • Hi Stefan,

      I see the issue as well. I assume you are using my code in the collapsing mobile menu tutorial? If so when you remove that code do you still have this issue?

      Reply
  12. Hi Mark,

    My website (sippingmayflies.com) header menu works fine for desktop and tablet, and looks perfect through the Divi mobile viewport option in the software. But on an actual mobile phone, the menu is a disgusting mess–it just rows of vertical text.

    I tried safe mode, and it didn’t affect anything.

    Divi appears to be fully updated (I’m using the Extra theme).

    Any thoughts would be greatly appreciated.

    Reply
    • Hi Sam,

      I just checked your website and it looks not good on the desktop either, it seems the CSS is not applied to the menu.

      Try to clear your static CSS cache in Divi > Theme Options > Builder > Advanced.

      Do you have a caching plugin installed?

      If so clear that cache as well.

      Reply
    • Hi Jenn,

      Your header is using a 3 column structure, image, menu, and social icon.

      The mobile menu dropdown will always be the width of the available space where it sits. Because you have a 3-column structure on mobile this space is very limited for the mobile menu.

      By default on mobile columns do not stay next to each other but are stacked.

      I see some custom CSS code is used to align those columns.

      You can undo that by placing this snippet in Divi > Theme Options > CSS

      @media only screen and (max-width: 480px) {
      .et_pb_row_0_tb_header {
      display: block !important;
      }}

      But that is perhaps not the look that you want for your mobile menu. In that case, you need to rebuild the menu in a different way but that is unfortunately too much for me to explain in a comment.

      Reply
  13. Hi Mark,

    Thanks for such a great website/resource for us fellow DIVI website developers!

    I’ve been through all the posts and tried all the tricks, including safe mode, and the relative/visible trick on the row and various other things that people commented that helped them but I’m still stuck.

    My menu is on top on a few of my pages, but then behind the text on any of my ‘spotlight’ pages. Can you take a look?

    Example – hamburger menu is working on this page:

    https://www.transcendency.faith/gallery/

    But then hidden behind the page content on my spotlight pages:
    https://www.transcendency.faith/spotlight-cain-and-abel/

    https://www.transcendency.faith/spotlight-noah-and-family-after-leaving-the-ark/

    https://www.transcendency.faith/spotlight-8-sacrifice-of-abrahams-son-isaac-ram-caught-in-the-thicket/

    Any insight would be appreciated. I can’t find what the difference is. Thank you!

    Reply
    • Hi Sheldon,

      I think this one is easy to solve.

      Open the section with your menu and go to the Advanced tab.

      Under Position set the z-index to 999

      Reply
  14. on https://ankewebersmit.com we have a problem with the mobile menu. I didn’t build the site, just have it for maintenance. Divi is updated, Solution 2 is not working. There are no headers there… solultion 3 I did put it in safe mode. Had the mobile menu once – could open it, but couldn’t close it and changing pages, the menu wasn’t working anymore. So really hope you have the fix for me

    Reply
  15. Hi I am using the Divi Child Theme Solar but the hamburger menu does not show any links.The site is https://ecowales.co.uk. Done all the usual stuff. Disabled plugins, run the divi main theme and it works fine so it is definitely the child theme. Any ideas?

    Reply
    • Hi Pete,

      Yes, this seems to be the child theme and you should contact the developers of this child theme for this one.

      I don’t have a solution for this.

      Reply
  16. hi Mark! I hope you can help me too:
    on https://vandenberg.letigre10.nl/ ive created an global header within divi theme builder. inside i have FIXED section, which causes the supreme mega module to remain within the header after tab on hamburger (mobile-only offcourse)
    I’ve tried playing with z-indexes and overflowing stuff already. Any solutions to this? Thank you so much in advance.

    Reply
    • Hi Eric,

      This issue seems to be coming from the plugin.

      Try to add this in Divi > Theme Options > CSS

      @media only screen and (max-width: 980px) {
      .dsm_mega_menu_0_tb_header .dsm-mega-menu-container.mobile-menu {
      height: auto !important;
      }}

      Clear browser cache after save.

      Reply
  17. Hi Please help. I have built this site https://abstds.com

    The mobile menu does not work. Certain pages in the menu seem to conflict with the image underneath and the links don’t work on mobile.

    I am not using a global anything. Really struggling here.

    Reply
    • Hi Jacqui,

      Add this in Divi > Theme Options > CSS

      .et_pb_section–with-menu .et_pb_row–with-menu {
      z-index: 999 !important;
      }

      Reply

Leave a Comment

0 Shares
Share
Pin
Tweet