Question

我正在使用引导程序，当我向下滚动时，我的导航栏就会消失。（尽管它有点紧张。将它放在我的测试网站上比发布屏幕截图更容易。http://dev.melmsie.com/

如果您需要此处的代码而非检查网站，请与我们联系。

奖金：另外，为什么我的主要图片（野花）在右边缺少一点？（我看到白了）

编辑：忽略网站的其余部分，只完成了约50％

<body>
  <div class="container-fluid">
    <div class="main-section">
      <nav class=" navbar navbar-default">
          <div class="container-fluid col-md-12 col-xs-12">
            <div class="headers-bfg">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">BFG</a>
                </div>
                <div class="navbar-header">
                 <a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
                </div>
            </div>
            <ul class=" nav navbar-nav ">
              <li><a href="#">Balloons</a></li>
              <li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
              <li><a href="#">Flowers</a></li>
              <li><i class="fa fa-circle" aria-hidden="true"></i></li>
              <li><a href="#">Gifts</a></li>
              <li><i class="fa fa-circle" aria-hidden="true"></i></li>
              <li><a href="#">Hours</a></li>
            </ul>
          </div>
      </nav>



.navbar {
position: fixed;
width: 100%;
}

.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;

Answer 1

您只需为此规则CSS添加z-index。

.navbar {
  z-index: 9000000;
}

如果您想了解有关 z-index 的详细信息，请参阅此文档w3schools。

Answer 2

如果您想只是覆盖行为，可以将z-index添加到以下css中.nabar

.navbar {
    position: fixed;
    width: 100%;
    z-index: 1;
}

Answer 3

我知道您想将导航栏设置在顶部，即使向下滚动，用户也总能看到导航栏，对吧？

你试过这个吗？

{{1}}

您可以看到full explanation right here

我希望自己有所帮助。如果没有，请告诉我。

Answer 4

对于导航栏，它看起来非常好。它不会为我或任何东西消失。通过图像，我能够确定它的位置。如果你去你的＆＃34; /css/bfg.css"找到.main-section，他就是你拥有背景图片的地方，你已经按照自己喜欢的方式设置了它，太棒了！您只需在.main-section图片上http://dev.melmsie.com/img/back.jpg修改宽度即可。为了方便添加10％的宽度，您不必继续编辑宽度，因为它是一个您不会错过的小区域。

只是你未完成的网站的外观很棒！ J. Carter：）

Answer 5

只需添加z-index。你需要将它添加到.navbar类中，看看代码。

.navbar {
    position: fixed;
    width: 100%;
    z-index: 9999;
}

至于图像，如果要在将其放入容器内时显示完整图像。你正在使用现在应该喜欢的全宽图像。

我的导航栏有什么问题？

5 个答案: