/* ── Mobile menu — collapsible submenus ─────────────────────────────────── Companion CSS for js/mobile-menu.js, which injects the `.mobile-toggle` anchor and flips `.dt-open` / `.visible`. `!important` is mandatory here, not sloppiness: Divi core ships `.et_pb_menu .et_mobile_menu li ul { display:block!important }`, which is why mobile submenus are always expanded out of the box. The `#main-header` variants exist because Divi's matching rule for the legacy (non-Theme Builder) header carries an ID and would otherwise outrank us. Portable by design — no brand colors, no type tokens, no fixed row heights: the chevron is an ETModules glyph in `currentColor` (so it inherits each site's menu link color) and the tap target sizes itself to whatever row height the site's menu padding produces. Nothing here needs per-site tuning. All collapse rules are scoped under `.eos-menu-js`, which the script sets on . If the JS fails to load, submenus stay expanded rather than hidden with no toggle to open them. */ /* Positioning context for the absolutely-placed toggle (nested items too). */ ul.et_mobile_menu li.menu-item-has-children, ul.et_mobile_menu li.page_item_has_children { position: relative; } /* 44px minimum tap target, pinned to the right of the row. `height: 100%` adapts to the row; `min-height` keeps it thumb-sized on tight menus. The parent link keeps the rest of the row, so it still navigates. */ ul.et_mobile_menu li.menu-item-has-children > .mobile-toggle, ul.et_mobile_menu li.page_item_has_children > .mobile-toggle { position: absolute; top: 0; right: 0; z-index: 999; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; height: 100%; padding: 0 !important; border: none; background-color: transparent; } /* Chevron — ETModules is loaded on the frontend by Divi itself. */ ul.et_mobile_menu li.menu-item-has-children > .mobile-toggle::after, ul.et_mobile_menu li.page_item_has_children > .mobile-toggle::after { font-family: "ETModules"; content: "\33"; color: currentColor; } ul.et_mobile_menu li.dt-open > .mobile-toggle::after { content: "\32"; } /* An expanded
  • grows to wrap its own submenu, and `height: 100%` would grow the toggle with it — a 999-z-index box covering every nested row and swallowing their taps. Pin it back to the parent row while open. */ ul.et_mobile_menu li.dt-open > .mobile-toggle { height: auto; } /* Collapsed by default. `.children` covers page-based fallback menus. */ .eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .sub-menu, .eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .children, .eos-menu-js ul.et_mobile_menu li.page_item_has_children > .sub-menu, .eos-menu-js ul.et_mobile_menu li.page_item_has_children > .children, .eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .sub-menu, .eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .children, .eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .sub-menu, .eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .children { display: none !important; visibility: hidden !important; } /* Expanded — one class heavier than the rule above, so it wins on specificity rather than on source order. */ .eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .sub-menu.visible, .eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .children.visible, .eos-menu-js ul.et_mobile_menu li.page_item_has_children > .sub-menu.visible, .eos-menu-js ul.et_mobile_menu li.page_item_has_children > .children.visible, .eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .sub-menu.visible, .eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .children.visible, .eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .sub-menu.visible, .eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .children.visible { display: block !important; visibility: visible !important; } /* Divi tints and bolds parent rows to signal "has children" — the chevron says it now, and the tint clashes with custom menu backgrounds. */ ul.et_mobile_menu li.menu-item-has-children > a { background-color: transparent; }