D8_4.0 已經(jīng)可以設置固定導航欄顯示在屏幕頂端了，但是那一欄不完整的黑條讓人看了更不順眼。筆者在這里介紹下輕松修下使其寬度自適應屏幕寬度。
大家可到這里下載《D8主題單雙欄定制版wordpress模板》進行測試修改
（1）將站點主題的 style.css 下載到本地，用文本編輯器打開，請使用有代碼高亮的編輯器。
（2）搜索“navbar-wrap”,轉(zhuǎn)到
.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){ ，在它前面加另一條數(shù)據(jù)，即
@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 下的實現(xiàn)導航欄置頂滿屏顯示方法：
（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> 之間添加如下代碼
<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 也可以實現(xiàn)固定導航欄功能了。現(xiàn)在你明白了，關鍵就在 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}。
新聞熱點
疑難解答
圖片精選
