This guide provides step-by-step instructions to resolve issues where the mobile or tablet dropdown menu is cut off, does not scroll, or causes the background page to scroll instead of the menu content. This is especially common when viewing menus with many submenus in horizontal (landscape) mode or on smaller mobile devices.

1. Why this issue happens

1. Parent Container Overflow: By default, Divi Rows, Columns, or Sections may have their Horizontal/Vertical Overflow set to Hidden. This clips the dropdown menu from expanding past the header height.
2. Lack of Menu-level Scrollbar: When a mobile menu has many items, it naturally exceeds the mobile viewport height (especially in landscape mode). If the menu container (.et_mobile_menu) does not have scroll rules defined, dragging inside it bubbles up and scrolls the page body instead of the menu itself.
3. Z-index/Stacking Context: The hero section or lower elements overlap the header on mobile devices, making the mobile hamburger menu icon or submenus unclickable.

2. Method 1: Resolving via Divi Builder Settings (No-Code)

If your header is built using the Divi Theme Builder, ensure that no parent element restricts the menu overflow.

Step 1: Row Settings

1. Open the Global Header (or specific layout) in the Divi Theme Builder.
2. Open the Row Settings (Green outline box) containing your Menu Module.
3. Navigate to the Advanced tab -> Visibility toggle.
4. Set both Horizontal Overflow and Vertical Overflow to Visible.
5. Go to the Position toggle and ensure the position is set to Relative with a high Z-Index (e.g., 999).

Step 2: Column Settings

1. Open the Column Settings (inside the Row settings) where the Menu module resides.
2. Navigate to the Advanced tab -> Visibility toggle.
3. Set both Horizontal Overflow and Vertical Overflow to Visible.

Step 3: Section Settings

1. Open the Section Settings (Blue outline box) containing the row.
2. Navigate to the Advanced tab -> Visibility toggle.
3. Set both Horizontal Overflow and Vertical Overflow to Visible.
4. Go to the Position toggle and set the Z-Index to a higher value (e.g., 9999).

3. Method 2: Resolving via Custom CSS (Recommended)

If you prefer a quick copy-paste solution or are facing CSS specificity issues (especially with Divi 5 updates), paste the following CSS code into Divi > Theme Options > General > Custom CSS (or your Child Theme’s style.css file):

/* ==========================================================================
   DIVI MOBILE & TABLET MENU SCROLL & CLIPPING FIX
   ========================================================================== */

/* 1. Force all parent header wrappers to have visible overflow to prevent cutoffs */
body .et-l--header,
body .et-l--header .et_pb_section,
body .et-l--header .et_pb_row,
body .et-l--header .et_pb_column,
body .et-l--header .et_pb_menu,
body .et_pb_section_1_tb_header, /* Add specific header section ID/class if needed */
body .et_pb_row_2_tb_header {
    overflow: visible !important;
}

/* 2. Constrain mobile menu height and enable vertical scrolling (Portrait Mode) */
body .et_pb_menu .et_mobile_menu,
body .et_pb_menu_1_tb_header .et_mobile_menu,
body .et_mobile_menu,
body #mobile_menu {
    max-height: 80vh !important; /* Limits menu height to 80% of screen height */
    overflow-y: auto !important;  /* Enables scrollbar inside the menu */
    -webkit-overflow-scrolling: touch !important; /* Smooth touch scroll for iOS */
}

/* 3. Handle Landscape (Horizontal) Mode for short viewport heights */
@media (orientation: landscape) and (max-height: 600px) {
    body .et_pb_menu .et_mobile_menu,
    body .et_pb_menu_1_tb_header .et_mobile_menu,
    body .et_mobile_menu,
    body #mobile_menu {
        max-height: 65vh !important; /* Smaller limit to fit landscape mobile screens */
    }
}

4. Troubleshooting: Clearing Cache

After applying either method, Divi’s cached static CSS files or caching plugins may serve the old styles. You must clear the cache to verify the fix on mobile.

1. Clear Divi Builder Cache:

• Go to Divi > Theme Options > Builder > Advanced.
• Locate the Static CSS File Generation option.
• Click the Clear button.
• Click Save Changes at the bottom.

1. Clear WordPress Caching Plugins:

• If using LiteSpeed Cache, WP Rocket, SG Optimizer, or Autoptimize, click Purge All Cache or Clear Cache.

1. Test in Private/Incognito Window:

• Open the site on your mobile device inside an Incognito/Private window to prevent the browser from loading older cached styles.