D8_4.0 已經可以設定固定導航欄顯示在螢幕頂端了，但是那一欄不完整的黑條讓人看了更不順眼。筆者在這裡介紹下輕鬆修下使其寬度自適應螢幕寬度。

大家可到這裡下載 《D8 主題單雙欄定製版 WordPress 模板》 進行測試修改

（1） 將站點主題的 style.css 下載到本地，用文字編輯器開啟，請使用有程式碼高亮的編輯器。

（2） 搜尋 「navbar-wrap」, 轉到

.navbar-wrap{position:relative;top:0;margin: 0 auto;left: 0;right: 0;z-index: 1000;}

（3） 在後面加上 background-color:#4a4a4a;width:100%; 即

.navbar-wrap{position:relative;top:0;margin: 0 auto;left: 0;right: 0;z-index: 1000;background-color:#4a4a4a;width:100%;}

（4） 搜尋 @media (max-width:1024px){ ，在它前面加另一條資料，即

@media (max-width:1320px){

.navbar-wrap{position:relative;top:0;margin: 0 auto;left: 0;right: 0;z-index: 1000;background-color:rgba(0, 0, 0, 0);width:100%;}

}

（5） 儲存好修改好的 style.css 檔案，並上傳到主題中，好了，大功告成。本站即為演示。

D8_3.0 下的實現導航欄置頂滿屏顯示方法：
（1） 開啟 style.css 檔案，搜尋 .navbar{height:52px;background-color:#4a4a4a; ，將這一整行修改為

.navbar-wrap{position:relative;top:0;margin: 0 auto;left: 0;right: 0;z-index: 1000;background-color:#4a4a4a;width:100%;}

.navbar{height:52px;background-color:#4a4a4a;*position:relative;*z-index:2;*zoom:1;max-width:1320px;margin: 0 auto;}

（2） 重複上面的第 （4） 步。哦 3.0 中沒有 1024，請搜尋 @media (max-width:979px){ 。

（3） 然後下載 header.php 檔案到本地，編輯它，在 <head> 和 </header> 之間新增如下程式碼

  1. <style>body{margin-top: 52px}.navbar-wrap{position:fixed}@media (max-width: 979px){body{margin-top: 0}.navbar-wrap{position:relative}}</style>

在 <div class=「navbar」>
之前新增 <div class=」navbar-wrap」>，在 <div class=」speedbar」>
之前新增 </div> 。就這樣，3.0 也可以實現固定導航欄功能了。現在你明白了，關鍵就在 header.php 中的
body{margin-top:
52px}.navbar-wrap{position:fixed}，你可以隨時修改它是否置頂導航欄，置頂為：body{margin-top:
52px}.navbar-wrap{position:fixed}，不置頂為：body{margin-top:
0px}.navbar-wrap{position:relative} 。