远方的海
远方的海,WordPress,免费
2014 Sep 24 05 : 38

WordPress固定导航栏

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

之前有朋友问我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;

我们可以举一个例子,例如本站的头部导航栏的原样式:

  1. //seavia.com导航栏原样式
  2. #header {
  3. padding18px 0;
  4. border-bottom1px solid #ededed;
  5. positionrelative;
  6. z-index: 900;
  7. background#fafafa;
  8. -webkit-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  9. -moz-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  10. -ms-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  11. box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  12. }

修改成固定导航栏后的样式:

  1. //seavia.com固定导航栏样式
  2. #header {
  3. padding18px 0;
  4. border-bottom1px solid #ededed;
  5. positionfixed;
  6. width:100%;
  7. opacity:0.8;
  8. z-index: 900;
  9. background#fafafa;
  10. -webkit-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  11. -moz-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  12. -ms-box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  13. box-shadow: 0 1px 0 0 rgba(158,158,158,0.2) inset;
  14. }

 修改导航栏下面的那层的CSS

可是我们这样改完后发现:下面的那层凭空串上来了…于是我们必须要把下面那层给挤下去。

一样,审查元素,找到下面那层的div的id。比如本站远方的海,导航栏下面的div是banners,我们只需要把这个id=”banners”div的样式增加一个下移头部高度个像素(px)就行。

代码:

  1. margin-top:70px;

这样我们就完美的完成了任务~

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. 超級efly :

    前來支持一下~可惜我的導航欄根本不再頂部… :o :o

    2014-9-26
  2. JV :

    以前就折腾过,主要就是改个position:fixed ,还有下层上移调整。

    2014-9-26