如何使 Divi 網站上的標準和垂直導航重疊

在這篇文章中，我們將向您展示如何結合標準導航和垂直導航。 進一步來說; 如何使二級菜單和頁腳與您網站上的垂直導航重疊。 這意味著您不必在頂部導航或垂直導航之間做出選擇； 你可以兩者兼得！ 您可以在主題定制器中隨意設置主菜單和二級菜單的樣式，這不是我們將在本文中明確幫助您實現的目標。 我們寧願向您展示以下有助於完成以下事情的事情：

• 如何讓你的二級菜單與你的垂直導航重疊
• 如何在滾動時固定二級菜單
• 如何使頁腳與垂直導航重疊

這些都是可以幫助您在網站上的標準導航和垂直導航之間建立良好平衡的東西。 通過使標準導航和垂直導航重疊，您的網站不會感覺它被垂直導航所支配。 您網站上的主要內容將自行調整為垂直導航，但二級菜單和頁腳的行為方式與未啟用垂直導航時的行為方式相同。

結果

在本教程結束時，您將能夠在使用垂直導航的網站上獲得以下結果：

重疊標準和垂直導航的靈感

在上一篇文章中，我們分享了一些使用垂直導航的網站示例。 所有示例都向我們展示了使用不常用的 Divi 選項可以獲得多大的創意。 您網站上經過深思熟慮的垂直導航可以提供您試圖與訪問者實現的額外互動。

在展示示例時，有一些評論激勵我們向您展示如何實現某些結果。 這篇文章是那些基於靈感的教程之一，它將向您展示如何對您的網站進行一些調整，而無需自己搜索解決方案。

我們受到了 Alex Brands 網站的啟發，該網站使用頂部的二級菜單和頁面左側的垂直導航。

滾動時，二級菜單隨之滾動。 它為網站提供了額外的小觸感，有助於將注意力集中在二級菜單中的內容上。 Alex Brands 是一個電子商務網站，固定的二級菜單有助於提醒人們購物籃中有什麼以及他們提供的交易。

這種垂直導航對於電子商務網站來說尤其有趣。 垂直導航使訪問者可以輕鬆瀏覽網站上提供的不同類別的項目。 當菜單項位於垂直導航中時，更容易遵循菜單項，因為它更容易解釋為人們必須瀏覽的列表。

如何使 Divi 網站上的標準和垂直導航重疊

訂閱我們的 YouTube 頻道

一般步驟

在深入了解向您展示如何使標準導航與垂直導航重疊的部分之前，我們將首先完成一般步驟。 這些一般步驟是您在應用重疊之前需要完成的基礎。

沒有任何進一步的到期； 讓我們開始吧。

創建您的菜單並添加菜單項

您需要做的第一件事（如果您還沒有這樣做的話）是向您的網站添加菜單和菜單項。 這些是將出現在垂直導航中的菜單項。 要向您的網站添加新菜單，請轉到您的WordPress 儀表板 > 外觀 > 菜單。 進入該頁面後，為新菜單命名並創建菜單。

繼續添加菜單項並將其設為主菜單。

將社交圖標添加到二級菜單

您需要做的下一件事是激活您的二級菜單。 為了確保二級菜單出現在您的網站上，您的二級菜單必須有一個被激活的元素。 在這篇文章中，我們只會添加社交媒體圖標，但您當然可以添加任何您喜歡的圖標。

要激活二級菜單並顯示社交圖標，請首先轉到您的WordPress 儀表板 > 自定義 > 標題和導航 > 標題元素 > 啟用“顯示社交圖標”選項。

激活垂直導航

您需要採取的下一步是在 Divi 構建器中啟用垂直導航。 為此，請轉到您的WordPress 儀表板 > 外觀 > 自定義 > 標題和導航 > 標題格式 > 啟用垂直導航。

除此之外，您還可以選擇您希望垂直導航出現的位置； 在您網站的左側或右側。

禁用主菜單的固定導航

在我們進行高級修改之前，還有最後一件事要做：禁用主菜單的固定導航。 如果您已禁用主菜單，請跳過此步驟。 但是，如果您的主菜單當前已修復，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 並禁用固定導航。

結合標準和垂直導航

在這篇文章的下一部分中，我們將向您展示如何使您的標準和垂直導航變得與平常不同。 當談到垂直導航時，我們習慣於看到屏幕的一部分被它覆蓋。 二級菜單和頁腳默認不會通過垂直導航。

但在某些情況下，我們希望確保輔助導航和頁腳位於垂直導航的頂部。 這樣，唯一依賴於垂直導航的就是主要內容。 您的網站不會感覺它完全分為兩個地方； 垂直導航和網站的其餘部分。

將 CSS 代碼添加到主題選項

您可以通過兩種方式添加 CSS 代碼：通過 Divi 的主題選項或通過主題定制器。 要將代碼添加到主題選項，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 常規 > 向下滾動選項卡並將以下 CSS 代碼行粘貼到自定義 CSS 框中：

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

將 CSS 代碼添加到主題定制器

另一種可能性是將 CSS 代碼行添加到主題定制器。 為此，請轉到您的WordPress 儀表板 > 外觀 > 自定義 > 附加 CSS > 並將 CSS 行粘貼到自定義 CSS 字段中：

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

最後的想法

在這篇文章中，我們向您展示瞭如何在您的網站上結合標準導航和垂直導航。 更確切地說; 我們已經向您展示瞭如何使二級菜單和頁腳與垂直導航重疊，以及如何修復二級菜單。 如果您有任何問題或建議； 隨時在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

Line design 的特色圖片/shutterstock.com