坚持导航，但不是顶部

Question

如果我有这样的代码：https://codepen.io/anon/pen/ObzgYo我怎么能这样做导航条不会粘在顶部而是在顶部下方20px？

我试着这样做：

.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 20;  <== 
}

但由于某种原因，它会让它坚持到底部

Answer 1

您正在编辑的代码适用于标题和主导航滚动的类。仅将一个顶部值添加到主导航滚动的类中，它按预期工作。

header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main-nav-scrolled {
  top: 20px;
}

Answer 2

我发现margin-x或padding-x更可靠。

.main-nav-scrolled {
    margin-top: 20px; 
}

请注意，在您的示例中，边距将为您提供空白，而填充将扩展您的背景颜色。