站长之家 - 站长资讯 - 易采站长站

当前位置: > 建站教程 > 源码教程 > 博客日志 >

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

2015-07-18 17:29 | 来源:网络整理 | 编辑:秋军 |

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> 之间添加如下代码

<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}。

  • 2015年免费WordPress主题推荐(国内精选)
  • WORDPRESS 建站过程中常见的15个错误小结
  • 提升WordPress 打开速度全面解决方案
  • WordPress 4.1 发布:开启免干扰写作模式
  • wordpress主题评论中添加回复的方法
  • wordpress上传图片不自动生成缩略图的解决方法
  • 防范wordpress主题加后门代码获取管理员权限
  • wordpress导航如何设置具体该怎么操作
  • WordPress导航菜单函数wp_nav_menu()详解
  • wordpress制作自定义菜单的方法
  • 网友评论

    关于我们 - 联系我们 - 广告服务 - 版权声明 - 人才招聘 - 友情链接 - 网站地图 - 帮助 - -

    CopyRight © 2010-2016 源码下载 easck.com , All Rights Reserved

    蒙公网安备 15052402000103号

    蒙ICP备14002389-1号