漢堡圖示不見了，選單擠成一長串文字疊在一起，最詭異的是同一個網站，桌面版打開完全正常，問題只出現在手機。這是不少人在 WordPress 用導覽區塊排版時踩過的怪現象，明明沒動過任何程式碼，重新整理、清快取都試過，畫面還是一樣亂。
問題的根源，多半藏在導覽區塊（Navigation Block）幾個容易被忽略的設定裡。這是 WordPress 5.9 之後、支援區塊主題的網站用來管理選單的方式，取代了傳統「外觀 > 選單」的做法，選單資料存放的位置、收合門檻、顯示模式，全都改用不同的邏輯運作。搞不清楚這套邏輯，改了一個設定卻不知道連動到哪裡，跑版問題自然反覆發生。
先從最根本的差異講起，導覽區塊的選單資料存在哪裡，跟傳統選單是不是同一套東西。
導覽區塊的選單資料不會存進外觀選單
很多人習慣把選單想成同一套東西，改哪裡都應該同步，這正是誤會的起點。根據 Make WordPress Core 的核心開發說明，導覽區塊自 WordPress 5.9 推出之後，選單項目就不再寫進「外觀 > 選單」那套資料，而是各自存成一種叫 wp_navigation 的自訂文章類型，跟一般文章、頁面一樣放在 wp_posts 這張資料表裡，只是類型不同。在編輯器裡新增、刪除、調整選單項目順序，這些異動會即時同步寫回對應的 Navigation Post；但顏色、字體、對齊這類外觀屬性只留在區塊本身的設定裡，不會寫進 Navigation Post。同一份選單內容，換到另一個佈景主題後可以套用完全不同的外觀，資料跟樣式其實是分開存放的兩件事。
傳統選單走的是另一套資料結構，靠 nav_menu 這個分類法搭配 nav_menu_item 文章類型運作，跟 wp_navigation 完全是兩套系統，彼此原本互不相干。有些人會在導覽區塊的選單清單畫面把舊的傳統選單「匯入」進來，這一步同樣在 Make WordPress Core 的說明裡講得很明白，匯入做的事只是把傳統選單的內容複製一份，轉成區塊格式插入導覽區塊，不是把兩邊接上同一份資料。複製完成的那一刻起，兩邊就各自獨立，之後在導覽區塊改了選單項目，不會反映回外觀選單的畫面；反過來，就算之後把佈景主題切回傳統主題，原本外觀選單裡的那份資料也完整保留，不會被導覽區塊的異動洗掉。搞懂這一點，遇到「明明才剛改過選單，怎麼另一邊看起來還是舊的」這種疑惑，就知道不是哪裡壞掉，而是兩套資料本來就不連動。
另一個常見的困惑是，登入後台卻找不到導覽區塊，或者外觀選單裡明明有選單，前台卻用不到。根據 WordPress.org 官方文件，導覽區塊只會出現在支援範本編輯的佈景主題，也就是俗稱的區塊主題，對應的編輯畫面是外觀 > 編輯器裡的站點編輯器。純傳統佈景主題沒有這個介面，選單管理仍然只能靠外觀 > 選單那套舊做法。判斷自己的主題是不是區塊主題，最簡單的方式就是看後台選單裡有沒有「編輯器」這個項目，有，才代表這個網站用得到導覽區塊。
沿用舊選單、頁面清單與逐項手動建立的取捨
選單資料要從哪裡來，導覽區塊給了三條路，不是只有一種預設做法。剛換上支援導覽區塊的佈景主題時，選單內容要嘛沿用原本的、要嘛從零開始，選哪一條要看網站現在的階段，剛架站、正在換佈景主題，還是頁面數量常常變動，適合的做法都不一樣。
沿用既有導覽選單或匯入舊選單
在導覽區塊的清單檢視畫面，點選單前面的「Menu options」，裡面的「Select menu」下拉選項，會同時列出這個網站已經建立過的區塊選單，也會列出用外觀 > 選單建立的傳統選單。想沿用某一份已經做好的選單，直接在這個下拉清單裡挑選就好，不用重新輸入任何連結。
如果挑的是一份傳統選單，選下去的當下就會觸發前面提過的複製轉換，把傳統選單的項目轉成區塊格式插入進來。這個做法最適合已經有一套穩定選單、只是換到區塊主題想沿用內容的情境，不用重新規劃選單結構，省下大半工夫；要留意的只有一點，轉換完成之後兩邊資料各自獨立，日後想調整選單順序或新增項目，記得在導覽區塊這邊改，改外觀選單那邊不會同步過來。
用頁面清單自動列出所有頁面
第一次在頁面加入導覽區塊、網站上還沒有任何已建立的選單時，系統的預設行為會自動帶入一個「頁面清單」區塊，把目前所有已發佈的頁面直接列出來，不用手動一個個新增連結。這對頁面數量還不多、而且會持續增減頁面的網站來說很方便，新增一個頁面，選單會自動跟著多一項，不必回頭手動維護。
但這個方便是有代價的。頁面清單區塊沒辦法個別調整順序，也不能挑選只顯示其中幾個頁面，它就是把所有已發佈頁面整批列出來。想要精細控制，例如把某個頁面排到最前面，或是故意不讓某個頁面出現在選單上，得先在清單檢視選取這個頁面清單區塊，點擊編輯，把它轉換成一個個獨立的頁面連結區塊，轉換之後才能自由排序、刪除或新增項目。
逐項手動加入連結、分類或自訂項目
想要從一開始就完全掌控選單的內容跟順序，可以在清單檢視點選「Create a new menu」，從空白選單開始逐項加入。這個做法最適合選單項目本來就固定不太會變動、而且希望精準控制顯示順序的網站。
導覽區塊能放的項目類型不只是頁面連結，官方課程 Learn WordPress 列出的選項包括自訂連結、文章連結、頁面連結、分類連結、標籤連結、首頁連結、頁面清單、搜尋、社群圖示、網站標誌，以及網站標題，逐一在編輯器畫布或清單檢視用「+」按鈕加進去。如果某個選單項目底下還要再放一層子選單，可以在該項目的選項按鈕裡點「Add submenu link」，建立下拉的子選單結構。這種做法前期要花比較多時間逐項設定，換來的是選單內容完全照自己的規劃走，不會被自動列表牽著跑。
選單圖示預設只在小螢幕自動出現
選單什麼時候會收進圖示、什麼時候整排攤開顯示，這正是回頭呼應開頭那個謎題的第一塊拼圖。很多「桌面版好好的，手機版卻整排選單擠成一團」的案例，根本原因就出在導覽區塊設定面板裡一個叫「Display」的控制項被改動或誤設。
根據 WordPress.org 官方文件，「Display」這個控制項只有三種模式可以選，分別決定選單圖示什麼時候出現、又是在什麼時候要點擊才會展開完整選單，而且三種模式的預設值只有一種。
關閉，選單永遠平鋪不收合
選成「Off」，選單不會收進任何圖示，不管螢幕再怎麼縮小，選單項目都會維持展開狀態直接攤開顯示。這個模式適合選單項目本來就很少、版面設計本來就容得下整排選單的網站，例如只有三、四個連結的簡單網站。
問題出在版面沒有為「展開狀態」預留足夠寬度的時候。選單項目一多，或是每個項目的文字比較長，小螢幕上放不下整排文字，就會直接被擠壓變形，選單擠成一團、彼此重疊，甚至蓋住旁邊的網站標誌。這正是開頭那個謎題最常見的成因之一，而且不容易被發現，因為桌面版空間夠大，同樣的設定看起來完全正常。
行動裝置，多數網站直接沿用這個預設值
「Mobile」是這三個選項裡的預設值，也是多數網站不特別調整、直接沿用的狀態。桌面版正常顯示整排選單，螢幕縮小到一定寬度之後才切換成一個圖示，點擊圖示會開啟一個覆蓋層，把完整選單顯示出來。
這個行為符合大多數使用者對手機選單的期待，桌面版空間夠大就直接攤開看，手機版空間有限就收進一個好按的圖示。如果不確定自己的網站該用哪一種，「Mobile」通常就是最安全的起點——真正常出問題的不是這個預設值本身，而是收合的門檻跟版面設計沒對齊。
永遠顯示，桌機也用圖示收合選單
「Always」這個模式不管螢幕大小，一律用圖示把選單收起來，連桌面版也要點擊才看得到完整選單。乍看之下違反常理，畢竟桌面版空間明明夠大，但這其實是刻意的設計選擇，不是設定錯誤。
適合的情境包括想要保留簡潔頁首、把版面空間留給主視覺或行動呼籲按鈕的網站，或者選單項目特別多、攤開來會佔用太多橫向空間的網站。遇到「Always」模式的網站，先別急著當成故障來排查，那多半是設計上刻意的取捨。
螢幕寬度低於 600 像素才會收合選單
選單什麼時候會被收進圖示，除了前面講的「Display」模式，背後還有一個更根本的數字在運作。這也是讀者最常問的問題，收合門檻實際發生在哪個寬度。
答案是一個寫死的固定值，螢幕寬度低於 600 像素，導覽區塊才會觸發收合、把選單換成圖示。WordPress.org 官方支援論壇上，核心參與者已經確認，以官方 Twenty Twenty-Four 佈景主題為例，這個門檻就是 600 像素，而且是核心行為，不是某個佈景主題自己額外加上去的限制。更重要的是，目前導覽區塊的設定面板完全沒有提供任何欄位可以直接調整這個數值，想改只能靠自訂 CSS。
問題就出在這裡。佈景主題自己設計的版面斷點，不見得剛好對齊 600 像素這個固定值。如果某個佈景主題的版面設計預期在比較寬的寬度就要切換成行動版排版，但選單本身要等到螢幕縮到 600 像素以下才會收合，中間那段區間，選單既沒有收進圖示，版面卻已經沒有足夠寬度容納整排選單，擠壓變形的跑版就會發生在這個過渡帶，這正是很多人覺得「桌面正常、手機才跑版，但實際測量寬度又明明超過教學文寫的斷點」的原因。
要調整這個門檻，官方回覆給出的做法是用自訂 CSS 覆寫兩個核心 class 的媒體查詢。一個是 .wp-block-navigation__responsive-container-open，這是收合圖示按鈕本身，邏輯是螢幕小於門檻要顯示、大於門檻要隱藏；另一個是 .wp-block-navigation__responsive-container，也就是選單容器本身，邏輯剛好相反。改寫媒體查詢的寬度數值，就能把收合門檻改到跟版面設計實際會擠壓的寬度對齊，而不是照抄某篇教學文寫的數字。
覆寫這兩段 CSS 有一個容易漏掉的細節，一定要保留 :not(.is-menu-open) 這類排除條件。少了這個排除，使用者點開選單之後，展開的覆蓋層會被同一段 CSS 一起藏起來，變成「按了圖示卻什麼都沒發生」，反而製造出新的疑難雜症。這段自訂 CSS 可以加在外觀 > 編輯器 > 樣式 > 附加 CSS，也可以寫進子主題的樣式表，兩種位置都能生效。
子選單的展開方式、箭頭和顏色設定
選單項目本身的顯示邏輯理清楚之後，還有子選單，也就是選單項目底下再掛一層下拉選單，這部分還有兩項專屬的互動設定跟外觀設定，關係到多層選單在手機跟桌面兩邊好不好用，也關係到視覺能不能跟品牌走。
子選單預設滑鼠移入才展開，可以改成點擊
根據 WordPress.org 官方文件，導覽區塊的設定面板裡有一個「Open on click」選項，預設是關閉的，代表子選單預設的展開方式是滑鼠移入，也就是常說的 hover，游標移到父層項目上，子選單就自動跳出來。這個行為只在有滑鼠的裝置上成立；在觸控裝置上，因為沒有滑鼠移入這回事，子選單的行為會自動改成點擊才展開。
如果選單項目下面掛的子項目比較多，擔心游標不小心滑過就誤觸展開、干擾使用者操作，可以主動開啟「Open on click」，強制不論用什麼裝置瀏覽，子選單都得點擊一次才會展開。這個選項一開，行為在桌面跟手機就統一了，不用再分別考慮兩種互動方式。
箭頭圖示與文字顏色都能跟著品牌走
「Show arrow」這個設定預設是開啟的，只要選單項目底下掛了子選單，前面就會多一個小箭頭，提示使用者這個項目點下去或滑過去還有更多內容。不想要這個視覺提示，可以直接關閉，箭頭就會隱藏。
色彩設定的部分，子選單的文字顏色跟背景顏色可以跟主選單分開單獨指定，不會被綁死成同一套配色。這代表可以讓子選單用比較淺的背景色跟主選單做出區隔，或是反過來用對比色讓子選單更顯眼，配色細節完全交給設定面板裡的色彩選項自己調整，不需要另外寫 CSS。
收合選單版面可自由設計，不再是固定樣式
前面幾節談的都是導覽區塊既有的行為，真正把手機選單體驗徹底改變的，是目前版本帶來的一項新功能。過去導覽區塊的手機收合覆蓋層，版面是系統寫死的，站長頂多調顏色跟字體；WordPress 7.0 開始，整個版面能自由設計。
舊版收合選單版面固定，只能調顏色與字體
根據 Make WordPress Core 2026 年 3 月的公告，在這次改動之前，點開手機版漢堡選單看到的覆蓋層，版面結構是核心寫死的固定樣式，不管換哪個區塊主題，覆蓋層長得都差不多，選單項目由上到下排一列，站長能動的只有顏色、字體大小這類表面設定，沒辦法在覆蓋層裡加一個搜尋框，或是把社群圖示、行動呼籲按鈕排進去。想要更豐富的手機選單畫面，以前只能靠額外寫 CSS 硬改，而且改動範圍有限。
新版可以放進所需區塊，也能套用主題內建版面
WordPress 7.0 起，覆蓋層改用範本部件的一個新專屬區域來實作，叫做 navigation-overlay。覆蓋層本質上變成一個可以自由編輯的區塊容器，站長能在站點編輯器裡直接組裝想要的內容，不再侷限於選單本身，還能放進搜尋框、社群圖示、網站標誌，甚至一個行動呼籲按鈕。
啟用這個功能有三種路徑，全部都在導覽區塊的側邊欄設定面板操作。第一種是在「Overlays」區段直接新增一個空白覆蓋層，從零開始自己排版；第二種是從清單裡挑選網站上已經建立過、或是佈景主題內建的既有覆蓋層樣式直接套用；第三種則是佈景主題本身在設計階段就已經預先指定好一個內建覆蓋層，啟用主題就直接生效，不用站長另外設定。這整個功能是選擇性開啟，沒有特別去設定的話，導覽區塊仍然沿用以前版本那套固定覆蓋層行為，不會因為升級版本就自動改變畫面。
目前這個新做法還有兩項已知限制，老實列出來比較實際。第一，自訂覆蓋層目前綁定在當下啟用中的佈景主題，如果之後切換佈景主題，自訂的版面不會被保留，得重新設計一次，官方也把這點列為待改進項目。第二，覆蓋層目前只能全螢幕顯示，還不支援側邊抽屜這類非全螢幕的呈現方式，想要那種效果的網站，現階段仍然得靠額外的外掛或客製開發。
選單跑版或失效，先從這三個地方查起
把前面幾節的知識收攏起來，回到開頭那個謎題，同一個網站，桌面版選單正常，手機版卻擠成一團或圖示整個不見，原因通常落在三個地方，而且順序有意義：先查最常見、最容易忽略的，再查最容易被誤設的。
快取外掛與外掛程式碼互相衝突，圖示點不動
最常見的一種症狀是選單看起來都在，漢堡圖示也還在，但點下去完全沒反應。這種情況通常不是導覽區塊本身的問題，而是快取外掛把已登入跟未登入使用者的頁面版本分開處理，或是啟用了 JavaScript 壓縮、延遲載入這類效能優化設定，導致收合選單需要的互動腳本沒有正確送到訪客的瀏覽器上。
排查的順序建議先從最簡單的開始，清一次快取，暫時關掉壓縮或延遲載入的設定，重新整理頁面測試圖示能不能點開。如果問題還在，再逐一停用其他外掛，測試是不是某個外掛的程式碼跟導覽區塊的互動腳本衝突。這個排查方式雖然要花點時間，但通常比直接改程式碼有效率，因為多數情況根本不需要改任何設定，單純是外掛之間互相干擾。
自訂斷點跟版面設計沒對齊，才是真正原因
如果圖示點得動、選單也展開得了，問題卻是選單本身在某個特定寬度區間被擠壓變形，那多半要回頭看前面提過的收合門檻。如果曾經用自訂 CSS 改動過導覽區塊的收合寬度，但版面設計，選單項目的字數、網站標誌的寬度，本身在另一個寬度就已經放不下，就會出現「螢幕還沒縮到收合門檻，選單卻已經被擠出版面」這種過渡帶跑版，而這正是最貼合開頭那個謎題，桌面正常、手機卻跑版的答案。
改法很直接，量出版面設計實際開始放不下整排選單的寬度，把自訂 CSS 裡的媒體查詢數值對齊到那個寬度，而不是照抄別篇文章給的斷點數字。每個網站的選單項目數量、文字長度、標誌寬度都不一樣，適合的斷點本來就該量自己的版面，不是套用同一個公式。
顯示模式被設成關閉，選單圖示直接消失
還有一種常被誤會成「壞掉」的情況，其實是設定被改動。如果導覽區塊的「Display」設定被改成「Off」，小螢幕上選單就會維持展開狀態，不會出現收合圖示，這正是前面提過「Off」模式的行為。如果版面沒有為展開狀態的選單預留足夠空間，在小螢幕上就會直接被擠壓變形，甚至整個蓋住其他內容，症狀看起來就像選單圖示整個不見了，只剩擠成一團的文字。
這種情況的改法很單純，回到導覽區塊的設定面板，把「Display」改回「Mobile」，選單就會恢復成小螢幕收進圖示、點擊展開覆蓋層的正常行為。查到這一步，前面提過的三種成因，外掛衝突、斷點沒對齊、顯示模式被改掉，大致就能涵蓋多數「桌面正常、手機跑版」的情況。
導覽區塊看起來只是把選單搬到區塊編輯器裡，實際運作的邏輯卻跟外觀選單完全不同：資料存放的位置不同、收合的門檻是固定值、顯示模式也分成三種截然不同的行為。搞懂這幾層機制，遇到選單跑版不會再靠猜的，而是知道該從資料連不連動、圖示點不點得開、寬度對不對得上這幾個角度依序排查。隨著 WordPress 7.0 把收合覆蓋層的版面也開放自由設計，導覽區塊能做的事只會越來越多，但底層的這幾條規則不會變，弄懂了，之後不管介面怎麼改版都用得上。