如何拥有向下滚动时不改变大小的固定导航栏？

Question

我的导航栏横跨页面宽度，但当我写 object: fixed; 时，导航栏缩小并覆盖文本。我希望导航栏像 dootrix.com 一样，在网站中根深蒂固，向下滚动时不会缩小！

我用我的代码创建了一个 JSFiddle：https://jsfiddle.net/kpsq8r9m/

这是我的 CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
  border-style: solid;
  border-color: darkgrey;
  border-width: 6px;
  position: fixed;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  padding: 14px 50px;
  text-decoration: none;
}

如有任何帮助，我们将不胜感激！

编辑：当它是 "shrinking" 时我的意思是如果我没有 position:fixed；它会扩展到整个页面，但当我这样做时它缩小了。为了了解我在说什么，我建议在 google chrome 中尝试一下。

Answer 1

请尝试：

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

z-index:100 应该可以解决问题。

如何拥有向下滚动时不改变大小的固定导航栏？

How to have a fixed navigation bar that doesn't change size when you scroll down?

html

css

jsfiddle