WordPress固定不动导航栏栏

以前有朋友跟我说Wordpress顶端的导航栏栏如何固定不动,实际上它是一个非常简单的难题,只必须加好多个css款式就可以保证。导航栏固定不动的益处便是便捷阅读者不管阅读文章到哪儿都能清晰的了解你网站的导航栏合理布局,假如你要完成这一作用,能够跟我一起向下看。

提升CSS编码,固定不动导航栏栏

最先,在你的导航栏栏处右击,核查原素(或是立即按住F12)。寻找你的导航栏栏的id,一般全是那样的一个div: div id="header" ... /div ,或是 div id="navigation" ... /div 方式上中同小异也不再间距。

寻找了这一div后,在style.css里边把这一div层的position改为fixed,假如沒有position款式,立即再加position:fixed。假如你的导航栏栏由于position由relative改为fixed产生了部位偏位能够加上上一个width:100%;的款式。

假如你要要更为美观大方,何不给导航栏栏提升一个全透明度,这儿得出chrome下的配备款式,opacity:0.8;

大家能够举一个案子,比如本网站的头顶部导航栏栏的原状式:


-webkit-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset; -moz-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset; -ms-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset; box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
-webkit-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset; -moz-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset; -ms-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset; box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
 改动导航栏栏下边的那层的CSS

但是大家那样改完后发觉:下边的那层平白无故串上去了 因此大家务必要把下边那层给挤下来。

一样,核查原素,寻找下边那层的div的id。例如本网站远方的海,导航栏栏下边的div是banners,大家只必须把这一id= banners div的款式提升一个下移头顶部高宽比个清晰度(px)就可以了。

编码:

假如有侵害著作权的資源请尽早联络网站站长,大家会在24h内删掉有异议的資源。


有关远方的海

远方的海网站站长为Sven。本网站关心互连网网络热点,各种各样建网站資源,完全免费資源和WordPress建网站技术性及其前端开发设计方案;同时还出示一些给国外中国人的小Tips。假如您也是个IT喜好者,对WordPress和有关建网站实例教程很感兴趣,热烈欢迎个人收藏或根据RSS、电子邮箱定阅本网站!


远方的海 · 2014 - 2018 · 保存一切支配权 · 雅致地应用Wildfire主题风格 · 此次载入同用 0.308 秒 · 进行了 52 次恳求

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://wxtpxc.cn/ziyuan/3974.html