当前位置:
首页 > WordPress教程 > wordpress固定导航栏设置教程

wordpress固定导航栏设置教程

当我们发布一篇过长的文章时,访客再往下拉动滑动条,一般的wordpress主题默认的情况下,是顶部的菜单导航栏隐藏。这样访客需要再拉动滑动条回到顶部才能再次点击导航栏,对于用户体验不是很好。我们可以根据自己的实用主题,来设置下顶部菜单导航栏更随滑动条的滚动而滚动,当然,此方法只适用于顶部有导航栏的wordpress主题 - -!

其实实现方法也比较简单,修改下导航栏css中的位置属性即可。以暗淡的黑个人网站举例,顶部导航栏属性为:#topnav,在主题css文件中添加以下代码:

1
2
3
4
5
6
7
8
#topnav{
height: 34px;
position: fixed;
width: 816px;
top: 10px;
left: 40px;
z-index: 111;
}

 

说明:

1.#topnav 为导航栏对应的css中的ID名称;

2.position: fixed是导航栏位置属性,fixed为固定;

3.top: 10px是导航栏举例网页最顶端距离,0px则代表无间隙;

4.z-index: 111是导航栏位置层叠属性值,一般用于二级或多级下拉菜单,防止被下拉菜单挡住,可设置较大数值。