最近，我們的一位用戶問我們如何為他們的網站創建粘性導航菜單？
用戶向下滾動頁面時，粘性導航菜單會保留在屏幕上。 這使頂部菜單始終可見，這對用戶體驗很有幫助，因為它包含指向您網站最重要部分的鏈接。
在本文中，我們將向您展示如何輕鬆地在WordPress中創建粘性浮動導航菜單。
什麼是粘性浮動導航菜單？
粘性或浮動導航菜單是在用戶向下滾動時“粘貼”到屏幕頂部的菜單。 這使您的菜單始終對用戶可見。
這是一個實用的菜單。 我們將向您展示如何為自己的網站創建完全像這樣的菜單：
為什麼和何時使用粘滯菜單？
通常，頂部導航菜單包含指向網站最重要部分的鏈接。 浮動菜單使這些鏈接始終可見，從而避免了用戶回滾到頂部。 事實證明，它可以增加轉化次數。
如果您經營在線商店，則頂部導航菜單可能包含購物車，產品類別和產品搜索的鏈接。 使此菜單具有粘性，可以幫助您減少購物車放棄並增加銷量。
某些最佳WordPress主題內置了對粘性導航菜單的支持。 只需在下面查看您的主題設置 主題»定制 啟用此功能。
如果您的主題沒有此選項，請繼續閱讀，我們將向您展示如何在任何WordPress主題或WooCommerce商店中輕鬆創建粘性浮動導航菜單。
方法1：使用插件添加粘性浮動導航菜單
這是最簡單的方法。 我們建議所有WordPress用戶使用它，特別是對於初學者。
如果您尚未設置導航菜單，請按照我們有關如何在WordPress中添加導航菜單的說明進行操作。
之後，您需要在Scroll插件上安裝並激活Sticky Menu（或任何東西！）。 有關更多詳細信息，請參閱有關如何安裝WordPress插件的分步指南。
激活後，您需要訪問 設置»粘滯菜單（或其他任何內容！） 頁面以配置插件設置。
首先，您需要輸入要粘貼的導航菜單的CSS ID。
您將需要使用瀏覽器的檢查工具來找到導航菜單使用的CSS ID。
只需訪問您的網站，然後將鼠標移至導航菜單。 之後，您需要右鍵單擊並從瀏覽器的菜單中選擇“檢查”。
這將拆分您的瀏覽器屏幕，並且您將能夠看到您的導航菜單的源代碼。
您需要找到與您的導航或網站標題相關的代碼行。 它看起來像這樣：
如果您很難找到它，請將鼠標光標移到“檢查”窗格中的不同代碼行上。 當您有正確的代碼行時，導航菜單將完全突出顯示：
在這種情況下，導航菜單的CSS ID為 site-navigation。
您需要做的就是在插件設置中輸入菜單的CSS ID，並在開頭添加一個哈希。 在這種情況下 #site-navigation。
不要忘記單擊頁面底部的“保存更改”按鈕。
現在，繼續並在WordPress網站上實時查看您的粘性菜單。 向下滾動時，它應留在頁面上，如下所示：
插件設置頁面上的下一個選項是定義屏幕頂部和粘性導航菜單之間的空間。 僅當菜單與不想隱藏的元素重疊時，才需要使用此設置。 如果不是，則忽略此設置。
我們建議選中以下選項旁邊的框：“檢查管理欄”。 這允許插件為WordPress管理欄添加一些空間，該空間僅對已登錄用戶可見。
在這裡，您可以看到我們測試站點上的管理欄正確顯示在粘性菜單上方：
如果用戶使用較小的屏幕（例如移動設備）訪問您的網站，則下一個選項可讓您取消導航菜單的操作：
您可以測試您的網站在移動設備或平板電腦上的外觀。 如果您不喜歡它的外觀，只需為此選項添加780px。
對選項進行任何更改後，請不要忘記單擊“保存更改”按鈕。
方法2：手動添加粘性浮動導航菜單
此方法要求您向主題添加自定義CSS代碼。 我們不建議初學者使用。
我們還建議您在開始之前閱讀有關如何輕鬆將自定義CSS添加到WordPress網站的指南。
首先，您需要訪問 外觀»定制 啟動WordPress主題定制器。
接下來，在左窗格中單擊“其他CSS”，然後添加此CSS代碼。
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
注意： 這將產生一個帶有黑色背景的導航菜單。 如果您想要其他顏色，請更改旁邊的數字 background。 例如，使用 background: #ffffff 將為您提供白色的菜單背景。
只需更換 #site-navigation 使用導航菜單的CSS ID，然後單擊屏幕頂部的“發布”按鈕。
繼續並訪問您的網站，以查看實際的浮動導航菜單：
如果導航菜單通常顯示在網站標題下方而不是上方，該怎麼辦？ 如果是這樣，此CSS代碼可能會與網站標題和標題重疊，或者在用戶滾動之前看起來太靠近網站標題和標題：
可以通過使用一些其他CSS代碼在頁眉區域添加邊距來輕鬆調整：
.site-branding {
margin-top:60px !important;
}
更換 site-branding 與標題區域的CSS類一起使用。 現在，在用戶向下滾動之前，粘性導航菜單將不再與標題重疊：
我們希望本文能幫助您將粘性浮動導航菜單添加到WordPress網站。 您可能還想查看我們的指南，該指南如何在不編寫任何代碼的情況下創建自定義WordPress主題，以及我們與最佳WordPress頁面構建器插件的比較。
如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。