在 WordPress 中隱藏移動菜單的提示

在大多數情況下，WordPress 主題已經定義了允許它們將常規導航菜單轉換為移動菜單的樣式。 如果您需要開箱即用的快速解決方案，這很方便。 例如，您有台式計算機的傳統佈局和移動設備上的漢堡菜單。 但是，如果您想進一步自定義甚至完全替換現有的移動菜單，這也是可能的。 有幾種方法可以在 WordPress 中隱藏移動菜單，使用插件或代碼。

如何在 WordPress 中隱藏移動菜單

完整的網站定制需要一些知識和經驗。 如果您想安全地進行無風險的定制，您可以聘請專業人員來定制和維護您的網站。 雖然您可以自己完成一些簡單的部分，但更嚴肅的定制確實需要專業的接觸。 當談到 WordPress 中的移動菜單時，您可以使用插件來簡化流程。 或者，如果您有編碼知識，您可以直接在代碼中創建更改。

為了幫助您更改移動菜單在您的網站上的顯示方式，以下是完成它的兩種最常見的方式：

• 使用插件隱藏 WordPress 中的移動菜單
• 使用 CSS 代碼隱藏移動菜單

如何使用插件隱藏 WordPress 中的移動菜單

您可能已經找到了一個具有有趣的移動菜單行為的 WordPress 主題，並希望輕鬆複製它。 此方法不需要編碼知識，因此更方便執行此任務。 安裝插件後，您將能夠完全刪除移動設備上的移動菜單。 此外，一些插件將允許您深入自定義它。 除了基本隱藏之外，您還可以使用它僅刪除菜單中的特定元素。

創建新的移動菜單

第一步是去外觀>菜單。 在那裡，您可以通過單擊頂部的“創建新菜單”選項來創建新菜單。 為您的新菜單命名，並使用屏幕右下角的“創建菜單”按鈕進行確認。

完成這些步驟後，左側的選擇將不再無法點擊，您可以為新菜單添加項目。 完成添加新項目後，只需單擊“保存菜單” 。

查找並安裝插件

下一步是查找並安裝插件。 有許多插件可以幫助您操作和自定義菜單。 一些最受歡迎的是 WP Mobile Menu、Max Mega Menu、Responsive Menu 等。 為了解釋起見，讓我們安裝並激活 WP Mobile Menu。

完成後，轉到左側 WordPress 側邊欄上的移動菜單選項。 在插件選項中，您現在可以選擇是否要在左側或右側顯示新的移動菜單。 選擇之前創建的菜單，然後向下滾動到“隱藏原始主題菜單” 。 在那裡，您可以選擇從原始菜單中刪除特定元素。 如果您單擊“查找元素”字段，您將獲得可供選擇的選項的實時預覽。 完成選擇過程後，只需保存更改。

替換或隱藏菜單

選擇要隱藏的內容後，只需返回外觀>菜單。 從下拉菜單中選擇您之前創建的移動菜單並設置其“顯示位置” 。 您的原始菜單現在被隱藏並替換為您的自定義菜單。

您現在可以訪問您的網站以查看正在運行的新菜單。 該插件現在將隱藏主題的移動菜單，而是顯示自定義菜單。

如何使用 CSS 代碼隱藏菜單

另一種隱藏移動菜單的方法需要一定的 CSS 代碼和實踐知識。 經常創建自定義 WordPress 主題的人已經知道一些自定義是多麼複雜。 而且，考慮到這些點，對於初學者來說，這並不是完全推薦的方法。 儘管如此…

找到您的菜單名稱

第一步是找到要編輯的菜單。 可能最簡單的方法是使用集成的瀏覽器開發工具。 轉到您要進行更改的網站並打開開發人員工具。 如果您使用的是 Google Chrome，您可以使用Ctrl+Shift+I快捷鍵來完成。 在屏幕頂部，您將找到切換設備工具欄選項，該選項將向您展示您的網站在移動設備上的外觀。 您甚至可以更改不同的類型和分辨率。

現在您看到了它在移動設備上的顯示方式，選擇類似箭頭的按鈕並單擊您的菜單進行檢查。 它將立即引導您進入代碼部分，您可以在其中查看給定菜單的 CSS 類。 也就是說，您將看到該類名稱。

使用新的代碼行隱藏菜單

獲得正確名稱後，只需轉到外觀>自定義並選擇“附加 CSS” 。 通常，這通常位於左側邊欄的底部。 單擊它，您將進入下一個屏幕。 在那裡，您可以單擊屏幕底部以選擇移動視圖，然後在其上方輸入代碼以隱藏菜單：

代碼： .menu-name {顯示：無；}

最後，單擊“發布”按鈕，您就完成了。 如果你對 CSS 代碼比較熟悉，那麼很多這些更改都可以在 CSS 文件中完成。 但是，您必須注意媒體查詢。 它們將允許您為不同的設備創建不同的規則，這樣您就可以更好地控制您的網站和菜單行為。

如果您是佈局編輯的初學者，插件選項可能是最好的開始方式。 如果您在不知道自己在做什麼的情況下開始更改代碼，則很容易破壞您的網站外觀。 CSS 中有許多規則和屬性相互覆蓋。 因此，如果您想在 WordPress 中毫無風險地隱藏您的移動菜單，請使用插件為您完成這項工作。