When your mobile menu only shows the logo, or the hamburger icon is visible but tapping it does nothing, the cause is almost always one of two settings inside the Menu module or its parent section. This article walks you through how to tell which one you're dealing with and how to fix each.
Diagnose what's actually happening
Open your site on a phone (or use the device preview in your browser) and check which of these two symptoms matches:
The icon is missing entirely. You only see the logo or an empty header bar. Nothing reacts to a tap.
The icon is there, but nothing happens when tapped. You can faintly see the three lines, or you know they should be there, but the dropdown never opens.
Each symptom has a different root cause and a different fix.
Fix 1: The icon color matches the header background
This is the most common cause of an "invisible" hamburger icon. The icon is rendering correctly, but its color is the same as (or very close to) the header background, so it disappears visually. A black icon on a black header behaves exactly like a missing icon.
Open the page in the Visual Builder or the Theme Builder Header layout.
Click the Menu module to open its settings.
Go to the Design tab.
Open the Icons option group.
Change the Hamburger Menu Icon Color to a value that contrasts with your header background.
Save your changes.
While you're in the Menu module, it's also worth checking the Dropdown Menu option group on the Design tab.
If the Mobile Menu Background or Mobile Menu Text Color is set to a value that hides the menu items, the dropdown will open but appear empty when tapped.
💡Pro tip: Use a contrast checker to confirm your hamburger icon color and header background are visually distinct. A subtle difference that looks fine on desktop can disappear entirely on a phone in bright sunlight.
Fix 2: The header is clipping the icon with an overflow setting
If the icon color is set correctly but the hamburger still doesn't appear (or appears but can't be tapped), the Visibility option group on a parent element may be clipping it.
The Horizontal Overflow and Vertical Overflow settings, when set to Hidden, will cut off anything that extends past the element's box, including the hamburger icon.
This is easy to miss because the overflow settings live on the header's parent section or the page itself, not on the Menu module.
Open your header template in the Theme Builder, or open the page in the Visual Builder.
Click the Section, Row, and Column that contains your Menu module.
Go to the Advanced tab.
Open the Visibility option group.
Set both Horizontal Overflow and Vertical Overflow to Visible (or remove the overrides so they inherit the default).
Save your changes.
If the header is built inside a Row or wrapped in a Group, repeat these checks on those elements too. The clipping can come from any ancestor.
Note: Don't forget to also check the page itself. Click the page settings (the three dots menu in the Visual Builder), open the Advanced tab, and check the Visibility group there. A page-level overflow setting will clip everything inside it.
Still not working?
If neither fix solves the problem:
Clear the Divi 5 CSS cache via Divi → Theme Options → Clear CSS Cache in the top right, then reload in an incognito window.
Enable Safe Mode under Divi → Support Center to rule out a plugin or custom code conflict.
Check Divi → Theme Options → General → Custom CSS for rules that target
.mobile_menu_baror.et_mobile_menuwithdisplay: none,visibility: hidden, oropacity: 0. Any of those will hide the icon even when the module is configured correctly.
If the icon appears once Safe Mode is on, the problem is custom code, and the article on troubleshooting custom CSS will help you narrow down the rule.