修復 Divi 中的響應式導航菜單

創建一個在所有屏幕尺寸上看起來都很棒的響應式導航菜單可能很困難。 我希望它不是那麼重要，但由於導航通常位於您網站的每個頁面的頂部，因此它是每個頁面上最先可見的東西。 所以把它做好是很重要的。 值得慶幸的是，Divi 的主題定制器允許您使用一些非常酷的標題選項來定制主菜單。 但是對於帶有左側徽標和右側菜單鏈接的默認菜單樣式，在較小的屏幕尺寸上很容易亂七八糟，尤其是當您有太多鏈接擠滿標題時。 我知道這對我來說經常發生。 我讓菜單看起來很適合桌面，然後你在平板電腦（尤其是 iPad Pro）上檢查它，標誌與菜單重疊，一些鏈接跳到一行。

今天，我將為那些擁擠的導航菜單提供一些有用的解決方案，以便它們即使在不那麼常見的屏幕尺寸上也能看起來很棒。 畢竟，至少對於某些用戶而言，您網站的可信度取決於它。

讓我們開始吧。

修復 Divi 中的響應式導航菜單

訂閱我們的 YouTube 頻道

導航菜單擁擠的四種解決方案

Divi 的一大優點是它建立在流體網格佈局上，該佈局使用媒體查詢（分隔 CSS）來調整您網站的樣式以適應不同的屏幕尺寸。 進行這些調整的點就是我們所說的斷點。 如果您致力於在所有屏幕尺寸上完善您的主導航菜單，您可能需要使用媒體查詢自定義菜單並調整某些斷點。

問題

我在使用 Divi 的默認導航菜單時遇到的最常見問題是客戶想要很多頂級菜單項。 主導航菜單上的菜單項超過 5 個（或具有大字體的菜單項）通常會在屏幕尺寸達到 980-1100 像素（小型筆記本電腦的尺寸）之間時產生換行和放大的標誌和大藥片）。 我相信您以前遇到過這個問題，即使您從未註意到它。 它看起來像這樣：

不理想。 那麼讓我們來看看這個問題的四種解決方案。

解決方案#1：使菜單欄全寬

通常我不建議將導航菜單設為全角，除非我也將網站的其餘部分設為全角。 我認為設計的一致性很重要。 但有時，如果這意味著您的導航菜單在所有設備上看起來都很棒，那麼這是一個很好的妥協。 這也是一個簡單的修復。

轉到Theme Customizer > Header & Navigation > Primary Menu Bar並選擇Make Full Width 。

解決方案#2：調整徽標和字體設置。

解決您問題的另一個簡單方法是使用主題定制器設置來調整默認的徽標最大高度、文本大小或字體選項。

調整這些選項時要小心，因為您永遠不想為了輕鬆修復而損害徽標或菜單項的設計和可讀性。

解決方案#3：在新斷點處顯示移動菜單。

以下是 Divi 中每個斷點的一般範圍：

大桌面：1405px 及以上
標準桌面：介於 1100 像素和 1405 像素之間
筆記本電腦和大型平板電腦：介於 980 像素和 1100 像素之間
平板電腦：介於 768 像素和 980 像素之間
智能手機和小型平板電腦：320px 到 768px 之間；
智能手機：320px 到 480px 之間；

默認導航菜單變成移動菜單（帶有漢堡導航）的斷點是 980px。 任何小於 980 像素的屏幕尺寸都將顯示移動菜單。

但是，如果您想避免任何奇怪的菜單換行符，請將斷點更改為不同的值。 假設您希望以 1024 像素左右而不是 980 像素顯示移動菜單。 為此，您需要在媒體查詢中插入一些自定義 CSS 以覆蓋 Divi 中的默認樣式。

轉到Theme Customizer > Additional CSS並輸入以下內容：

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

這個媒體查詢做兩件事。 它隱藏常規菜單並在 1024px 斷點處顯示移動菜單。

解決方案#4：在某個斷點處調整菜單樣式

此解決方案可能是最佳選擇，因為它允許您在某些斷點處對菜單進行最大程度的控制。 您可以通過使用它們的 css 類來定位您的菜單項，以在您的媒體查詢中創建自定義樣式。

以下是 Divi 菜單項的默認 CSS：

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

假設您希望菜單字體大小默認為 18 像素，但您希望它在某個斷點處更改為 14 像素。 為了節省更多空間，您可以將內邊距減少到 15 像素而不是 22 像素。 您可以通過將所有菜單項的 css 類作為目標並創建媒體查詢來做到這一點

轉到Theme Customizer > Additional CSS並輸入以下內容：

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

這個 CSS 所做的是在任何 1200 像素或以下的屏幕上將字體大小更改為 14 像素，並將右內邊距更改為 15 像素。 這會在桌面上調整屏幕大小時創建平滑過渡，並允許您在大型平板電腦和小型筆記本電腦上保持默認導航。

調整其他標題樣式

Divi 的主題定制器中有五種標題樣式可供選擇（不包括垂直導航）。 這五種樣式包括默認（本文中已經提到的樣式）滑入式、全屏、居中和居中內聯徽標。

滑入和全屏樣式

如果您的網站設計要求幻燈片樣式或全屏樣式，那麼您的響應式菜單幾乎是萬無一失的，因為移動導航漢堡圖標用於在所有屏幕尺寸上觸髮菜單。

居中風格

如果您使用居中樣式，您有更多空間供菜單項呼吸，但如果您仍然需要更多空間，您可以使用我們用於默認樣式的相同自定義解決方案，使其看起來像您想要的那樣。

居中內聯標誌樣式

最後，居中的內聯徽標樣式標題從一開始就有點棘手。 如果您希望徽標位於頁面中央，您需要做一些正確的事情。 首先，您需要有偶數個菜單項，這樣中間的標誌仍然是核心。

其次，您為每個菜單項使用的文本量將決定徽標的中心點。 如果一側有更多文字，則徽標會稍微偏離。 在大多數情況下，這不是什麼大問題，但是如果您在徽標正下方有一個帶有居中元素的標題，這可能是一個明顯的問題，您需要糾正。

請注意，與標題部分中的居中標誌相比，菜單中的標誌是如何偏離居中的。

現在我要將菜單項標籤“信息元素”縮短為“信息”。 現在看看徽標如何更多地向中心移動。

此解決方案可能是您在所需位置獲取徽標所需的全部。 您可以將諸如“關於我們”之類的內容更改為“關於”，反之亦然，以進行這些小調整。

但是，如果您是一個完美主義者，這可能會有點令人沮喪（我可以擁有自己的時刻。相信我。）因此，如果您想進行更多調整，則可以進行更深層次的定制。 除了調整菜單項中的實際文本來調整徽標的中心點之外，您還可以向任何項目添加自定義 css 類並為其提供一些右側或左側的填充。 這應該給你最後的推動，你需要讓一切都集中起來。

從 wordpress 儀表板轉到 Appearance > Menus 並確保您在 Screen Options 區域中選中了 CSS Classes。

然後切換打開您想要定位的菜單項。 然後在 CSS Classes 輸入框中輸入一個 CSS 類。 我稱我的為“輕推”。

之後，轉到Divi > Theme Customizer > Additional CSS並添加以下自定義 CSS：

#top-menu li.nudge  {
padding-right: 32px;
}

使用這個 css，只有類“nudge”的項目才會被賦予 32px 的右內邊距； 這將徽標推到足以使其居中的位置。

就是這樣！

閉幕式

Divi 讓構建網站變得輕鬆有趣。 但有時，工作（和我們的客戶）的要求要求我們加倍努力以確保我們的網站是一流的。 好網站和好網站的區別在於小細節。 響應式導航菜單的執行方式是您想要正確處理的重要細節之一。 大多數情況下，這是您的用戶在您網站的每個頁面上首先看到並與之互動的內容。 破損的菜單會給人留下不好的第一印象。 我希望這篇文章能幫助“推動”你朝著正確的方向前進（對不起，我無法幫助自己:)）。

我確信還有更多的問題和解決方案我沒有在這篇文章中提到。 隨意在評論中發布它們。 我期待著您的回音。

乾杯!