Elementor 手機版選單無法下拉？用 CSS 強制修復全螢幕選單

在進行 WordPress 網站開發時，經常會遇到 Elementor 手機版選單開啟後無法捲動，或是內容被 Header 容器遮擋導致下方的連結點不到。這類問題通常發生在 Header 設定了固定位置（Sticky）或外層容器使用了 overflow: hidden 時，導致下拉選單的內容超出了父層的可見範圍。

為什麼選單會卡住？

Elementor 的下拉選單預設是相對定位，這意味著它會受到父層容器的高度與溢出屬性限制。當選單內容過長時，手機版使用者會發現無法向下滑動查看剩餘的選單項。透過 CSS 將選單強制改為固定定位（Fixed Positioning），可以讓選單脫離原本的文件流，直接覆蓋在視窗最上層，從而解決捲動失效的問題。

修復 CSS 程式碼

@media (max-width: 768px) {
  nav.elementor-nav-menu-dropdown.elementor-nav-menu__container[aria-hidden="false"] {
    position: fixed !important;
    top: 80px !important; /* 改成原本 header 高度 */
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto !important;
    width: 100% !important;
    z-index: 99999;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
  }
  
  html, body {
    overflow: visible !important;
    height: auto !important;
    position: static !important;
  }
}

步驟拆解說明

1. 鎖定展開狀態的選單：利用 [aria-hidden=”false”] 選擇器，確保 CSS 只有在選單被點擊開啟後才生效。
2. 設定固定全螢幕定位：使用 position: fixed 將選單鎖定在視窗。top 值應根據你 Header 的實際高度進行調整（例如 80px），確保選單不會蓋住 Logo 或漢堡按鈕。
3. 啟動內部捲動：透過 overflow-y: auto 允許選單內容在超出高度時獨立捲動，並加上 -webkit-overflow-scrolling: touch 優化 iOS 設備的滑動手感。
4. 釋放全域限制：強制設定 html 與 body 為 overflow: visible，防止部分佈景主題的預設樣式鎖死了頁面捲動，確保在選單關閉後恢復正常。

踩坑提醒與實務建議

如果在使用此代碼後選單依然無法顯示，建議檢查 Elementor 的「選單設定」中是否開啟了「全螢幕」選項，因為該選項會產生不同的 HTML 結構，此時 CSS 選擇器可能需要調整為 .elementor-menu-toggle.elementor-active 對應的容器。

實作懶人包，照作就能用

1. 前往 WordPress 後台，安裝並啟用 FluentSnippets 外掛。
2. 進入 FluentSnippets 點擊新增片段，並將語言類型選擇為 CSS。
3. 將上方的 CSS 程式碼完整複製，貼上到內容區域中。
4. 找到程式碼中的 top: 80px !important;，將 80 更改為你網站 Header 的實際高度。
5. 儲存並啟用該片段。
6. 清除網站快取與手機瀏覽器快取，即可前往手機版前台確認選單滑動效果。