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.
Then under position set the Position to Relative.
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.
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.
Hi Mark.
I inherited this website and migrated it to our server, but the mobile menu does not appear to be working. Can you please assist? https://immunitybio.com
I got it working! Thanks
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.
I have a site we inherited at https://www.lackawanna.edu/. The mobile Hamburg seems to work when viewing on a desktop and the mobile version on the desktop seems to be fine. But, when viewing the site on an actual phone, it does not work.
Hi Stan,
Try this: go to Divi > Support Center and enable Safemode.
See if it works now.
If it does work then it is likely a plugin or child theme (if you use one) conflict.
Still does not work in safe mode.
There is a conflict or asyncing the javascript that the menu uses is breaking it. I disabled the plugin and it started working.
There is a plugin issue. https://wordpress.org/plugins/async-javascript/ is preventing the menu from working. I am trying to isolates which javascript files need to be excluded for the menu to work.
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?
Hi Kurina,
Sorry for the late reply. I checked your site and it seems you have fixed it.
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
Hi,
Try to add this in Divi > Theme Options > CSS
header .et_builder_inner_content {
z-index: 99 !important;
}
Mobile Menu is not working https://roseenergetics.com
It is fine on the desktop and ipad.
I have tried safe mode and it still does not work.
Disabled the Async-javascript app and it still doesn’t work
Hi Katie,
Sorry for the late reply. I checked and it seems to be working now right?
Can you please check out my website https://www.funeral.com.eg
The mobile menu isn’t clickable.
Hi Fatma,
Is Divi up to date?
My menu in the website http://www.corrisberto.it is not opening on mobile. I am using the divi theme too.
Do you have any idea on the reason?
Hi Roberto,
I just tested this on my mobile and it is working on my end.
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
Hi Anita
I checked on my mobile but on my end your menu works fine and it scrolls to the content.
Good day.
The hamburger menu on mobile will not expand on the product pages:
https://connecting2dev.wpengine.com/portfolio/
Do you know how we can fix this issue? Thanks ever so much!
Hi Jane,
I just checked your site and the hamburger mobile menu is expanding on my end.
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)
The main menu is not working on mobile. The site is https://www.conomlaw.com. Please let me know if you have any thoughts. Thanks!
Hi,
I checked but it is working on my end. What is not working for you?
https://jordibhealthandfitness.com
mobile doesn’t work, but seems too on desktop
Hi Jordan,
Your site does not seem to be built on Divi. This post with solutions is for Divi websites.
Hi, thank you for your post. I have the same trouble with my website today and i don’t know what to do. Could you check ?
Its https://bornwiz.com
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).
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 ?
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…
When i disable this 2 plug in, the menu is working. Maybe i have bad settings ?
I think the Lite plugin is conflicting with the mobile menu for you
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!
Hi Connor,
I checked your website on my mobile, but it is working on my end.
What does not work for you?
Hi Mark, I sure like your headers! The mobile version is not working, and I tried everything above. If you could give me some insight that would be great!
https://lawsofflorida.com
Thank you!
Randy in Florida
Hi Randy,
Is this a header of my header layout pack?
If so could you send a login to info@markhendriksen.com?
Then I will have a look for you.
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?
Hi Cat,
Do you still have this issue? I checked your site and it is working on my end.
Hello! I accidentally deleted my global header (I’m not a web designer, but I create landing pages), and when I rebuilt it, the hamburger menu doesn’t appear on mobile. Can you help me? https://awkngschooloftheology.com/
Hi Stephanie,
Sorry for the late reply. I checked your site and it seems you have fixed it I do see the hamburger menu.
Hi Mark,
The mobile menu on this site is not working, but only on pages where a CRM form is being iFramed into the page. The two pages are:
https://perigonimaging.com/contact-us/
and
https://perigonimaging.com/tulsa-pro-procedure/
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.
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!
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?
Hi Mark. None of your suggestions worked. I’m at CvilleCBT.com.
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?
Hi, and thank you for this article. I’m experiencing this problem too and none of the fixes seem to be working. The site is https://rhythmflyfishing.com. Any help would be greatly appreciated.
Thanks
I was able to fix the problem by turning off the Defer jQuery and jQuery Migrate button on Divi > Theme Options > General > Performance.
Hi Nick,
I was just checking your site and noticed you already found the fix.
Great! – works for me too !!!
Thank You.
Hi, a website I have inherited control of is having this issue on mobile. It’s https://stonemonkeyyoga.co.uk/
I don’t need to update Divi, I don’t have a global header and I have tried safe mode. So I’m trying solution 4!
Thanks so much
Fran
Hi Fran,
Did you try safe mode in Divi > Support Center? To see if any of your plugins is causing your issue.
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
Opps Mark,
I sent the wrong url. I should not be sending requests at 12:30 AM. The website is https://beta.gicnh.com.
Tina
Hi Tina,
Do you still have this issue? I checked your site and it looks fine on my end.
Hi there… i inherited a site and tried your above tasks, but I can’t seem to get this mobile menu to float over the section below it. I have a desktop menu and a mobile menu, with different elements in them.
https://seasalthome.com/home2/
Thanks in advance!
I just realized I have a coming soon page up, so you won’t see it. I can turn it off long enough for you to take a look. just let me know when. Thanks!
Hi Dave,
I can have a look for you when you are able to turn the coming soon page down.
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!
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.
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
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?
Hi Mark,
the issue is still there…. oh man – your code doesn’t seem to be the problem at all…
Maybe thats a problem of Divi themselves, isn’t it?!
Thanks 🙂
Stefan
I fixed it. It was my own fault. I used the same anchor-name on each page. I’m stupid.
Thanks very much for all!
Good to hear you found the issue
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.
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.
Hello, I also inherited a site at http://www.ankenycommunitynetwork.org and have followed your initial steps and menu is still distorted. Please advise, thank you!
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.
Hey,
The hamburger menu icon won’t change to a close icon when the menu is clicked on mobile. I am using the divi full width menu.
Is there any way to fix this?
https://microsoftaccessexperts.nl/
Hi Jimmy,
The Divi mobile menu icon does not change to a closing icon when expanded, this is how its defaults work.
Hi I am having this issue the hamburger does not show on the mobile view. http://www.warbird-competitions.com. any help appreciated
Hi Lisa,
I checked your link but it works on my end. Do you still have this issue?
Hi I fixed thanks so much for checking
Your welcome
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!
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
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
Hi Karin,
I checked your site and your mobile menu is working on my end. Do you still have this issue?
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?
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.
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.
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.
Hi Mark,
I hope you can help me with my Divi menu that is not showing when access the shop page https://www.situstarget.com/shop/ and product page https://www.situstarget.com/product/jasa-optimasi-keamanan-wordpress-ninja/.
I use header from importing DiviWooPro header.
Thank you in advance.
Hi Robi,
Could you sent me an email (https://www.markhendriksen.com/hire-me/) with a login then I will have a look for you.
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.
Hi Jacqui,
Add this in Divi > Theme Options > CSS
.et_pb_section–with-menu .et_pb_row–with-menu {
z-index: 999 !important;
}
UGH… just stopped working
ContractorWebsites.com
You can contact me if you like
Hi Keith,
I checked the website and the mobile menu, but it is all working on my end.