Divi 5 Mobile Menu Fix – Collapsible Submenus with Smooth Animation
If you’re using Divi 5 and noticed that your mobile menu submenus are not collapsible or lack smooth animation — you’re not alone.
By default, Divi doesn’t provide a clean way to collapse and expand submenu items on mobile. This can hurt user experience and make navigation feel cluttered.
In this guide, I’ll show you how to create a fully functional mobile menu with collapsible submenus, smooth animations, and properly positioned toggle icons — step by step.
📺 Video Tutorial
Watch the full step-by-step tutorial below:
🧩 What This Solution Does
- ✅ Collapsible mobile submenus
- ✅ Smooth open / close animation
- ✅ Clean toggle (+ / −) buttons
- ✅ Parent links remain clickable
- ✅ Works only on mobile (does not affect desktop)
⚙️ Where to Add the Code
CSS:
Divi → Theme Options → Custom CSS
JavaScript:
Divi → Theme Options → Integration → Add code to the <body>
🎨 CSS Code
/* START - Divi 5 Mobile Menu Collapsible Submenus */
@media only screen and (max-width: 980px) {
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent {
position: relative !important;
}
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent > a {
padding-right: 56px !important;
}
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent > .submenu-toggle {
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 56px !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
z-index: 1000 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
appearance: none !important;
}
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent > .submenu-toggle::before {
content: "+";
color: #ffffff;
font-size: 24px;
font-weight: 700;
line-height: 1;
display: block;
}
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent.submenu-open > .submenu-toggle::before {
content: "−";
}
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent > ul.sub-menu {
overflow: hidden;
transition: max-height 0.35s ease, opacity 0.25s ease;
}
.et_mobile_menu li.menu-item-has-children.mobile-submenu-parent > ul.sub-menu li a {
padding-left: 20px !important;
}
}
/* END - Divi 5 Mobile Menu Collapsible Submenus */
💻 JavaScript Code
<script>
/* START - Divi 5 Mobile Menu Collapsible Submenus */
(function () {
function isMobile() {
return window.innerWidth <= 980;
}
function getDirectChild(item, selector) {
for (var i = 0; i < item.children.length; i++) {
if (item.children[i].matches(selector)) {
return item.children[i];
}
}
return null;
}
function closeSubmenu(item, submenu, toggle) {
item.classList.remove('submenu-open');
toggle.setAttribute('aria-expanded', 'false');
submenu.style.maxHeight = submenu.scrollHeight + 'px';
submenu.style.opacity = '1';
submenu.style.visibility = 'visible';
submenu.style.display = 'block';
requestAnimationFrame(function () {
submenu.style.maxHeight = '0px';
submenu.style.opacity = '0';
});
setTimeout(function () {
if (!item.classList.contains('submenu-open')) {
submenu.style.visibility = 'hidden';
}
}, 350);
}
function openSubmenu(item, submenu, toggle) {
item.classList.add('submenu-open');
toggle.setAttribute('aria-expanded', 'true');
submenu.style.display = 'block';
submenu.style.visibility = 'visible';
submenu.style.opacity = '1';
submenu.style.maxHeight = 'none';
var height = submenu.scrollHeight;
submenu.style.maxHeight = '0px';
requestAnimationFrame(function () {
submenu.style.maxHeight = height + 'px';
});
}
function toggleSubmenu(item, submenu, toggle) {
if (item.classList.contains('submenu-open')) {
closeSubmenu(item, submenu, toggle);
} else {
openSubmenu(item, submenu, toggle);
}
}
function setupMenu(menu) {
if (!menu || !isMobile()) return;
var items = menu.querySelectorAll('li.menu-item-has-children');
items.forEach(function (item) {
var link = getDirectChild(item, 'a');
var submenu = getDirectChild(item, 'ul.sub-menu');
if (!link || !submenu) return;
item.classList.add('mobile-submenu-parent');
var toggle = getDirectChild(item, '.submenu-toggle');
if (!toggle) {
toggle = document.createElement('button');
toggle.type = 'button';
toggle.className = 'submenu-toggle';
toggle.setAttribute('aria-label', 'Toggle submenu');
toggle.setAttribute('aria-expanded', 'false');
item.appendChild(toggle);
toggle.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
toggleSubmenu(item, submenu, toggle);
});
}
if (!item.classList.contains('submenu-open')) {
submenu.style.display = 'block';
submenu.style.maxHeight = '0px';
submenu.style.opacity = '0';
submenu.style.visibility = 'hidden';
}
});
}
function initMenus() {
if (!isMobile()) return;
document.querySelectorAll('.et_mobile_menu').forEach(setupMenu);
}
function refreshOpenMenus() {
if (!isMobile()) return;
document.querySelectorAll('.et_mobile_menu li.submenu-open').forEach(function (item) {
var submenu = getDirectChild(item, 'ul.sub-menu');
if (submenu) {
submenu.style.maxHeight = submenu.scrollHeight + 'px';
}
});
}
document.addEventListener('DOMContentLoaded', function () {
initMenus();
setTimeout(initMenus, 300);
setTimeout(initMenus, 800);
setTimeout(initMenus, 1400);
document.addEventListener('click', function (e) {
if (
e.target.closest('.mobile_menu_bar') ||
e.target.closest('.et_pb_menu__icon') ||
e.target.closest('.et_pb_menu__menu-toggle')
) {
setTimeout(initMenus, 250);
setTimeout(initMenus, 700);
}
});
window.addEventListener('resize', refreshOpenMenus);
});
})();
/* END - Divi 5 Mobile Menu Collapsible Submenus */
</script>
⚠️ Common Issues & Fixes
- Submenu not opening?
Remove any old CSS usingdisplay: none !important;on submenus. - Toggle works but nothing happens?
Clear cache (Divi, browser, caching plugins). - Desktop menu looks broken?
Make sure all styles are inside@media (max-width: 980px).
🚀 Final Tip
Always test your menu on a real mobile device — not just browser preview. Divi sometimes behaves differently depending on how the mobile menu is rendered.
💬 Need Help?
If you need help optimizing your website, improving conversions, or running high-performing ads — feel free to contact me.
I build fast, modern websites and marketing systems that actually generate results.
0 Comments