如何在 WordPress 中隱藏移動菜單（一步一步）
已發表: 2021-12-22
在 WordPress 中，如果您想隱藏移動菜單，請繼續閱讀此博客
您會發現大多數 WordPress 主題都具有內置樣式，這將幫助您將導航菜單自動轉換為移動菜單。
在您的手機上，您可能不想使用類似的菜單，因為您可能需要一些不同的菜單樣式才能在手機上顯示。
下面您會發現在 WordPress 中隱藏移動菜單的兩種不同方法如下：
方法 1：使用 WordPress 插件隱藏移動菜單
對於初學者，建議使用方法 1，因為他們不需要亂碼，他們只需要使用插件來隱藏 WordPress 主題默認提供的移動菜單。
隱藏後，他們可以使用各種菜單或選擇不在移動設備上顯示任何菜單。
要使用 WordPress 插件，初學者首先需要登錄 WordPress 儀表板，然後點擊外觀，然後點擊菜單頁面。 在這裡，他們可以創建一個新的導航菜單以在手持設備上展示它。
現在您將找到另一個屏幕，其中有一個新的菜單名稱，以便您可以在需要時識別它。 考慮您已將名稱添加為“電話菜單”。 現在您可以選擇項目。
將項目添加到菜單後，現在該單擊保存菜單按鈕了。
現在，您可以從 WordPress 插件存儲庫中選擇一個 WP Mobile 菜單並下載它。 或者，您可以直接從 WordPress 儀表板安裝此插件。 
您需要在激活後進入移動菜單頁面來配置插件設置。
現在在這裡，您將找到一個選項，讓您的電話菜單位於左側或右側。 您可以將選項 b 設置為打開或關閉。 
現在從下拉菜單中選擇我們之前創建的電話菜單。
現在，向下滾動頁面，直到您獲得“隱藏原始主題菜單”選項。 現在，此選項將幫助您告訴插件 WordPress 主題的移動菜單需要隱藏。 
默認情況下，移動友好型 WordPress 主題使用的最常用元素標識將由插件使用。 大多數網站用戶不需要在這裡做任何事情。
假設您使用的插件無法隱藏主題的移動菜單，那麼您可以再次訪問同一頁面並鼠標單擊“查找元素”以指向主題的導航菜單。
要存儲所有設置，請不要忘記保存更改。
現在我們已經使用插件進行了配置，您需要告訴您的網站它需要展示由插件添加到新菜單位置的電話菜單。
去做這個：
轉到外觀並單擊菜單頁面。 
確保在下拉菜單中正確選擇了您創建的電話菜單。 現在選擇菜單項下方的位置，即右移動菜單或左移動菜單。
現在檢查新菜單是否在您的網站上可見。 但是，我們使用的插件不會展示您主題的移動菜單，但會展示我們創建的手機菜單。
我們推薦的插件即 WP 移動菜單插件將幫助您更改菜單欄的顏色、添加更多圖標、更改不透明度以及設置中的更多內容。 您可以輕鬆自由地使用此類設置選項。
方法二：借助代碼，隱藏移動菜單
在選擇此方法來隱藏移動菜單時，請確保您有編碼經驗或至少了解一些自定義 CSS。
對於這種方法，您將有兩種不同的方法。 您可以在 CSS 的幫助下使整個移動菜單不可見，或者您可以使單個項目在移動設備上不可見。
使用 CSS 讓您的完整菜單在小型設備上不可見
您希望藉助自定義 CSS 代碼更改的元素需要弄清楚。 要執行此操作，您必須先訪問您的網站，然後單擊導航菜單。 現在右鍵單擊它並選擇一個檢查工具。
現在你會發現兩個不同的屏幕。 一個屏幕將顯示您的網站，而另一個屏幕將顯示源代碼。 但是，除非您桌面的導航菜單沒有被移動菜單替換，否則您需要將瀏覽器屏幕調整為更小的尺寸。
現在需要弄清楚 WordPress 網站導航菜單使用的 CSS 和標識符。 通過在您網站的源代碼上移動鼠標，您可以突出顯示菜單區域。
- 現在轉到 WordPress 儀表板。
- 點擊外觀
- 轉到自定義頁面選項以啟動主題定制器。
- 現在您可以返回“附加 CSS”選項卡，然後在管理面板的右上角單擊移動圖標。
定制器將向您顯示您的網站在手機上的外觀預覽。 需要添加下面提到的 CSS 代碼，在預覽面板中，移動菜單將消失。
.navbar-toggle-wrapper {
顯示：無；
}
確保您已將 .nav-toggle-wrapper 替換為 WordPress 主題使用的標識符。
在頂部單擊“發布按鈕”以保存所有更改。
使用 CSS 使特定菜單在您的手機上不可見
這是隱藏移動菜單的第二種方法。 在這種方法中，您將被要求構建一個導航菜單，然後使移動菜單在您的桌面或移動設備上可見或不可見。
使用這種方法的好處是您可以利用類似的導航菜單來隱藏桌面或手機上的菜單。
- 在 WordPress 儀表板中
- 去外觀
- 點擊菜單頁面
- 點擊屏幕選項按鈕
- 就在“CSS 類”選項旁邊，選中該框。
在找到要隱藏的菜單項之前，向下滾動頁面。 您將在菜單項設置中找到添加 CSS 類的選項。 單擊它並添加 .hide-mobile CSS 類。
要隱藏移動菜單，請重複此過程。
但是，您甚至可以在您希望在台式計算機上隱藏的菜單項上單擊鼠標。 在這裡，您需要添加 .hide-desktop CSS 類。
現在通過單擊“保存菜單按鈕”保存更改。
要隱藏移動菜單，您需要添加自定義 CSS 代碼。 為了這
- 去外觀
- 點擊定制頁面
- 主題定制器將啟動
- 現在單擊附加的 CSS 選項卡
- 並在 CSS 框中添加下面給出的代碼
@media（最小寬度：980px）{
.隱藏桌面{
顯示：無！重要；
}
}
@media（最大寬度：980px）{
.hide-mobile{
顯示：無！重要；
}
}
現在您可以在您的網站上查看您隱藏的移動菜單是否可見。 移動菜單可能會不可見，因為我們正在按照隱藏移動菜單的步驟進行操作。
結論：
我們希望本博客中提到的兩種不同方法可以幫助您輕鬆有效地隱藏移動菜單。