大前端 D8 主题导航栏置顶满屏显示

[tr][td]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 文件到本地，编辑它，在  和  之间添加如下代码

[*]

在  之前添加 <div class=”navbar-wrap”>，在 之前添加
。就这样，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}。
</strong>
[/td][/tr]