防止固定标头重叠内容

Question

我遇到了这个问题，我有一个与主要内容重叠的响应式固定标头！

我在同一页面上使用内部/锚点链接。来自nav-menu / header链接和VERTIAL DOT NAVIGATION Jquery插件。如果没有标题与该部分的前60px重叠，我无法链接到不同的部分。我一直试图将margin-top: 60px;添加到.container和.section-top类但没有成功。

我希望能够链接导航菜单/标题链接和jQuery点导航，而不会将标题与60px重叠。

有关详情，请参阅此jsfiddle！

Answer 1

只需添加：

[id^="section"]{
  padding-top: 60px;
}

并删除此

 .section-top {
  margin-top: 60px;
}

https://jsfiddle.net/w8u2kg1j/

Answer 2

尝试使用以下CSS，使标题仅与填充区域重叠：

section {
  padding-top:60px;
}