引导导航栏在滚动时不会向下移动

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

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

Answer 2

这里的每个人都帮助了我，因为我确实有一个打字错误，而且我最终确实做了我想做的正确的事情。

特别感谢 Johannes，我意识到，如果您像我一样尝试这样做，并使用 Bootstrap，请确保在位置后添加 !important：fixed;在你的 CSS 中，因为它会覆盖 Bootstraps 在这方面的默认属性，让你在向下滚动时无法将导航栏保留在屏幕上！

Answer 3

不要忘记宽度应该是100%

导航 {

 text-align: center;
 position: fixed !important;
 width: 100%;

}

Answer 4

您有一个针对 calss

.navbar

的 CSS 规则，其中包含

position: relative

。这会覆盖

nav

的固定设置

将

!important

添加到您的位置：

nav

的固定设置：

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

等等

这应该可以解决它。

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