将横幅置于Bootstrap 3导航栏上方?

时间:2014-11-30 02:20:28

标签: css twitter-bootstrap-3 navbar banner

我有这个Bootstrap 3导航栏:http://www.bootply.com/xkcDjvQslb

我想要进行以下修改:

  1. 在固定导航栏上方添加横幅
  2. 向下滚动时隐藏横幅
  3. 我看到了以下示例:http://www.bootply.com/69848;在引导程序上不是很好,当我拉相关代码时,它会破坏我的菜单。

    横幅(导航栏上方)将是一个左侧带有徽标,右侧带有标题的表格。 我需要有人指出我正确的方向吗?

2 个答案:

答案 0 :(得分:3)

在nav中删除导航栏固定的类。然后将标记放在导航上方。

http://www.bootply.com/vxJEiv1RC2

答案 1 :(得分:3)

我在这里找到了解决方案:http://jsfiddle.net/DTcHh/541/,只需要清理我的代码:

topnavbar {
    margin: 0;
}
#topnavbar.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

#banner {
     background-color: yellow;   
}