Divi Mobile Menu Not Working: Find Out Why the Hamburger Won't Open

Invisible, frozen or buried: name the symptom first

"The menu is broken" covers several different faults, each with its own fix. Open the site on a real phone, logged out, and note which of these you see. Then repeat in a desktop browser narrowed below tablet width; a fault that shows in only one of them is already a clue.

• No icon at all. The header shows a logo and empty space where the three lines should be.
• An icon that does nothing. It is visible, but a tap neither opens nor closes the menu.
• A menu that opens behind the page. You see the hero image, or text bleeding through, where the links should be.
• A menu cut short. The first two links appear and the rest are sliced off at the bottom edge of the header.
• The desktop menu on a tablet. Links squeeze onto one line at widths where you expected a hamburger.

Also note your version. Appearance, then Themes, shows it: anything numbered 4.x is Divi 4, and 5.x is Divi 5. Several fixes below differ, and we mark each. The general version of this problem, across all themes, is covered in WordPress mobile menu not working.

Which Divi header is drawing your menu

A Divi site can have its menu drawn in two quite different ways, and owners often do not know which one theirs uses. If the Theme Builder has a global header, the menu is a Menu module inside that template, and its settings live on the module. If there is no Theme Builder header, Divi draws its default header, and the phone version is styled in the Theme Customizer under Mobile Styles, in a section called Mobile Menu.

Check Divi, then Theme Builder. A header in the Default Website Template applies site-wide unless a more specific template overrides it, and edits to the wrong template never show. Template assignments that hide headers are a separate fault with their own repair guide. On Divi 5.1 and later, Complete Site Editing lets you open the header in place while looking at the page, which makes it obvious which template is in charge.

Six causes, from the boring to the obscure

1. The icon is there, painted the header's color (Divi 4 and 5)

Elegant Themes' Divi 5 help article on invisible hamburger icons puts this first: the icon renders in the header's own color. Check: tap where the icon should be. If a menu opens, it is a color problem. Fix: open the Menu module, go to the Design tab, Icons group, and set Hamburger Menu Icon Color to something that contrasts. In the Dropdown Menu group, check the mobile menu background and text colors too. Both versions document these settings.

2. The header section clips the dropdown (Divi 4 and 5)

The mobile menu opens downward, outside the header's box. If that box hides overflow, the menu is cut off or never seen. Check: right-click the header, choose Inspect, and look for overflow: hidden on the section, row or column. Fix on Divi 5: for each of those elements, go to Advanced, Visibility, and set Horizontal Overflow and Vertical Overflow to Visible. On Divi 4: look for rounded corners as well. Divi 4.10.8 fixed a case where border radius on a section or row stopped the mobile menu from showing, so update first, then remove the radius if the problem remains.

3. The next section sits on top (Divi 4 and 5)

When the menu opens behind the hero, the stacking order is wrong. Fix: select the header section, go to Advanced, Position, and raise its Z Index. Elegant Themes suggests values such as 100, 999 or 9999 in its Divi 5 dropdown guide. On Divi 5, also check the first section below the header: if it uses Sticky Position or a Scroll Transform effect, that guide says to remove the effect or set that section's Z Index to 0. Divi 4 has the same Z Index field under Advanced, Position.

4. A script error stops the menu before it starts (mostly Divi 4)

Divi opens the mobile menu with its own front-end script. If an earlier script throws an error, the tap handler may never be attached, so the icon looks fine and does nothing. Check: open the browser console and reload. "jQuery is not defined" points at script timing, covered in the next section.

5. The breakpoint is not where you think (differs by version)

On Divi 4, the vendor's help article says the Menu module switches to the mobile menu below 981 pixels, and shows how to move that point with Free Form CSS in the module's Advanced tab. Divi 5 has seven customizable breakpoints, three on by default, set in the Sitewide Responsive Breakpoints panel (the triple-dot icon in the builder's top bar). Elegant Themes does not say whether the hamburger follows a moved breakpoint; test at those widths.

6. The mobile header is hidden on mobile (Divi 4 and 5)

Many Divi sites use two headers: one for desktop, disabled on phones, and one for phones, disabled on desktop. One wrong checkbox and phones get neither. On Divi 4 the setting is Disable On in the Advanced tab's Visibility group. On Divi 5, check the Phone and Tablet visibility toggles and any Display Conditions on that section, as the vendor's guide to missing mobile elements describes.

When Divi's own speed settings break the tap

Divi's Performance tab, under Divi, Theme Options, General, includes Defer jQuery And jQuery Migrate. The vendor describes it as moving jQuery to the body when possible to speed up loading. That is good for paint times and bad for any script that calls jQuery before it arrives. The classic victim is code pasted into Theme Options, Integration, in the head field. Elegant Themes' own help article for collapsible mobile submenus puts a jQuery script exactly there.

The vendor knows about the friction. The Divi 4 changelog records, in version 4.10.4, a fix for the defer option "sometimes breaking Integration Code", and further deferral fixes for third-party scripts through 4.11.3. Two related switches sit beside it: Enqueue jQuery Compatibility Script, which the vendor offers for third-party scripts that need jQuery declared as a dependency, and Defer Additional Third-Party Scripts, which defers plugin and theme scripts and can cause JavaScript errors.

• Turn off Defer Additional Third-Party Scripts first. It is the most aggressive of the three, and the likeliest to break a menu plugin.
• Test with Defer jQuery And jQuery Migrate off. If the menu works, the problem is a script that needs jQuery early. Then try it back on with Enqueue jQuery Compatibility Script enabled.
• Check your caching plugin. Options that delay all JavaScript until the first tap or scroll can swallow that first tap on the hamburger. Exclude Divi's scripts or switch the feature off.
• On Divi 5, the help center describes the Performance sub-tab as covering "deferring scripts, and more". We could not confirm that every Divi 4 option carries over by name, so read the labels on your own install.

If the console shows errors that are not about jQuery, our guide to theme JavaScript errors explains how to trace a script back to its plugin.

Getting the hamburger back, in order

1. 1

   Take a backup and work on staging

   Header changes hit every page. Use a staging copy, or at least export the Theme Builder template first.

2. 2

   Clear Divi's CSS and every cache

   On Divi 4, go to Theme Options, Builder, Advanced, and click Clear beside Static CSS File Generation. On Divi 5, use the Clear CSS Cache button at the top right of Theme Options. Then purge the caching plugin, host cache and CDN. Stale styles cause enough menu faults to deserve their own page.

3. 3

   Test in Safe Mode

   Divi, Support Center, Safe Mode switches off plugins and custom code for your login only. If the menu works there, a plugin or a snippet is responsible.

4. 4

   Fix color and visibility

   Set the Hamburger Menu Icon Color, mobile menu colors and visibility toggles as described above, then reload on a phone.

5. 5

   Fix clipping and stacking

   Set overflow to visible on the header's section, row and column, and raise the section's Z Index.

6. 6

   Read the console

   If the icon still does nothing, look for errors, then work through the deferral switches one at a time.

7. 7

   Check custom CSS last

   Search Theme Options custom CSS, page CSS, Code modules and the child theme stylesheet for rules on .et_mobile_menu or .mobile_menu_bar that set display none, visibility hidden, opacity 0 or overflow hidden. The vendor lists these selectors in its Divi 5 menu guides.

Keeping the menu tappable after the next update

Repeat menu failures usually come from three habits: jQuery snippets in the head, two optimizers that both defer scripts, and editing the live header. Keep custom scripts in one documented place. Let Divi handle CSS and script deferral and the caching plugin handle page caching only. After every update, tap the menu on a real phone before a customer does.

If you are moving from Divi 4 to Divi 5, test the header first. The Divi 5 changelog includes fixes for migrated Menu module dropdown backgrounds and logo sizing, which shows the header is one of the places the migration needed work. Our page on Divi layouts that broke after an update covers the migration itself. Our hosting and maintenance plans run this kind of check after every update, and the theme troubleshooting service takes one-off cases.

When a menu needs this much care, look at the stack

A navigation menu is the most basic thing a website does. On a Divi site it depends on a Theme Builder template, a module's settings, Divi's script loader, jQuery, a caching plugin's JavaScript rules and any snippets pasted into the head. Each updates on its own schedule, so the menu can fail without anyone touching it. The Divi speed guide shows how much of that machinery exists to keep pages fast.

In a Next.js build the header is one component, written and tested in code, with its open and close behavior in the same file as its markup. A plugin update cannot change its stacking order overnight. That costs more up front, and changing the header's structure needs a developer. If the trade sounds right for your business, compare the two in Divi vs Next.js and read how a move works in Divi to Next.js. Owners then edit content in Athena CMS. Other Divi faults are collected in the Divi repair hub and the troubleshooting section.