Loper主题菜单导航栏固定,为了让Loper主题更好阅读文章浏览方便,为了让Loper主题更好评论信息方便,为了让Loper主题更好体验浏览效果,拽立网,让所以决定把Loper主题页面菜单导航栏固定在顶部起来是个不错的选择,Loper主题固定灵感采用是杰创官方博客介绍方法,今天我把Loper主题菜单导航栏固定方法分享给大家,请看以下操作!

固定后的效果图!

Loper主题菜单导航栏固定-拽立网

固定Loper主题一共修改4个部位:【采用下面代码介绍】

position: fixed;    /*生成绝对定位的元素,相对于浏览器窗口进行定位*/
z-index: 99;        /*设置元素的堆叠顺序,使该层处于最顶层*/
width: 100%;    /*是自适应宽度,百分百整齐*/
top: 10px       /*是导航栏举例网页最顶端距离*/

 

1.登陆你的后台管理,选择【外观】-【编辑】-【 loper: 顶部 (header.php)】

直接搜索这个代码:

<header>

 

搜索到的代码后面添加下面全部代码:

<div id="header">

 

2.登陆你的后台管理,选择【外观】-【编辑】-【 loper: 样式表 (style.css)】

直接搜索这个全部代码:

#content { padding:0 30px; margin-top:10px; }

 

上面代码替换下面全部代码:

#content { padding:0 30px; margin-top:20px; }

 

直接搜索这个全部代码:

#main { background-image:url(images/bg.jpg) ;background-color:#F0F0F0; background-repeat:repeat-x;-webkit-text-size-adjust:none;width: 100%;}

 

上面代码替换下面全部代码:

#main { background-color:#ececec; background-repeat:repeat-x;-webkit-text-size-adjust:none;width: 100%;}

 

3.登陆你的后台管理,选择【外观】-【编辑】-【 loper: 样式表 (style.css)】

直接添加下面全部代码:【最底部】

/*主题顶部菜单栏固定*/
#if-logged-in {width: 100%;position: fixed;z-index: 99;}
/*主题菜单导航栏固定*/
#header {top: 21px;position: fixed;z-index: 98;background-image:url(images/headerbg.jpg);}

 

提示:我这方法固定菜单导航栏比较简单,跟着我写的方法顺序修改就行了!

提示:z-index:?99; 是显示最前面,如果你发现它挡住你其他最前面效果,可以降低数值!

Loper主题菜单导航栏固定
版权声明:本站原创文章,于2015年09月19日,由 拽立网 发表,共 1150 字。
打赏