Question

我一直在这里以及其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏：

<nav class="navbar">
  <a href="#About">About me</a>
  <a href="#Education">Education</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#Contact">Contact</a>
</nav>

我已经在导航标签内部使用和不使用div容器进行了尝试。

这里是相应的CSS：

nav {
  text-align: center;
  position: fixed;
  top: 0;
  lef: 0;
  right: 0;
  height: 35px;
  padding-top: 15px;
  box-shadow: 0px 0px 8px 0px;
  -webkit-box-shadow: 0px 0px 8px 0px;
  -moz-box-shadow: 0px 0px 8px 0px;
  background-color: gray;
  width: 100%;
  z-index: 100;
}

我还试过没有z-index：100; 如果有人知道我错过了什么，或者我是否需要添加其他内容，我有兴趣了解它是什么以及我可以在哪里阅读它以便我得到它。

谢谢：）

Answer 1

你有位置：固定。还有一个错字“lef”

Answer 2

.navbar中有calss position: relative的CSS规则。这会覆盖nav

的固定设置

将!important添加到您的位置：nav的固定设置：

nav {
  text-align: center;
  position: fixed !important;

等

这应该解决它。

http://codepen.io/anon/pen/ZWBwEW

Answer 3

这里的每个人都帮助了我，因为我确实有一个错字，我最终确实得到了我想做的事情。

特别感谢约翰内斯，我意识到，如果你像我一样尝试这样做，并使用Bootstrap，请确保在位置之后放置！important：fixed;在你的css中，因为它覆盖了这方面的Bootstraps默认属性，让你无法在向下滚动时保持屏幕上的导航栏！

滚动时Bootstrap导航栏不向下移动

3 个答案: