当前位置: 首页 > 网页制作 > 正文

wordpress导航栏固定在顶部

今天在论坛看到有人提问如何让wordpress的导航栏始终固定在顶部,其实这个方法还算比较简单的,使用css的position的fixed属性就可以了。关于position属性,在什么情况下需要用,怎么用,首先,我们应该先了解下position属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

下面开始看步骤:先看下效果:

上图就是采用了顶部导航固定,静态的情况下是看不出跟平时模板有什么区别,继续看下图:

看了吧,当网页下滑时,内容部分直接在导航条后边过去,导航条始终显示在顶部。

css代码如下:

.div1{background-color:#FF0000;width:300px;height:100px;margin-top:70px;}
.div2{background-color:#33FF66;width:98%;height:50px;margin-top:0px;
      position:fixed;top:10px;}

其中div1是指的内容部分,div2指的导航部分。这只是一个简单的测试,所以div模块比较少。但是道理基本都是想通的,把position标签加在head合适位置就可以了,适当的修改下文章模块的顶部距离!

本文固定链接: https://www.ziyouwu.com/archives/586.html | 自由屋博客www.ziyouwu.com|wordpress建站技巧分享

wordpress导航栏固定在顶部:目前有11 条留言

  1. 过来支持一下 值得收藏分享

    2015-08-31 上午1:20 北京市 阿里巴巴 [回复]
  2. 5楼
    百度SEO

    第一次来你网站,博客不错哦,赞一个。求认识,求回访。

    2015-04-26 下午9:20 北京市 联通 [回复]
  3. 4楼
    seo

    博客不错哦,可以换个链接不 http://www.aiyw.net

    2015-04-20 下午12:00 北京市 联通 [回复]
    • 你首页给自己输出的链接太多了吧

      2015-04-21 下午11:37 山东省济南市 联通 [回复]
  4. 博主,比如导航条上还有博客的LOGO,等看不见logo的时候导航条在固定的话,应该如何实现?

    2015-02-04 下午12:51 广西南宁市 /桂林市 [回复]
  5. 板凳
    分享

    顶顶

    2014-02-18 下午3:34 北京市 蓝波宽带IDC机房(朝阳门丰联广场) [回复]
  6. 测试一下

    2014-02-15 下午9:01 浙江省杭州市 电信 [回复]

发表评论

6 + 4 = ?


快捷键:Ctrl+Enter