Html 使用汉堡包菜单导航到正确的部分，而不使菜单与文本重叠

我的引导应用程序中有一个汉堡包菜单。让我提供一些上下文，您需要一台笔记本电脑和手机才能看到这一点。按照以下步骤操作：

1：在桌面计算机上，访问

2：上下滚动页面，你会注意到导航栏是固定的，这就是我想要的

3：现在在导航栏中，选择任何链接，如“课程”或“服务”。您注意到它将带您进入相关章节，您可以看到该章节的标题及其正文

4：现在用手机访问网站

5：打开汉堡包菜单并导航到同一部分。你应该注意到一个问题，事件虽然会带你到正确的部分，但是你看不到部分的标题，因为它被菜单覆盖了。您需要关闭菜单才能看到它

我希望移动设备在导航到链接时，您可以看到部分的顶部，而无需关闭汉堡包菜单，就像您在桌面上导航时可以看到部分的顶部一样

要使其工作，需要更改哪些内容

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
...
</nav>

body { 
    padding-top: 80px; 
}

...
正文{
填充顶部：80px；
}

---

我最初想通过css创建一个距离，在这里我做了一个 @介质，并将车身的衬垫发送至300px以覆盖高度 汉堡包菜单打开的时候，它的顶部看起来不太好 当菜单没有打开时，我们有一个大的白色 空间

引导导航栏将从

991px

开始引入汉堡包和下拉式布局。与您建议的实现类似，可以将类（例如，您提到的填充属性）添加到相关元素中，这些元素将生成“向下推”内容的输出，以便在打开下拉列表时可以看到内容

@media (max-width: 991px) {
   ...
}

对于JavaScript方面，您可以参考以下内容

$（文档）.ready（函数（）{
$（'#navbarSupportedContent'）。在（'show.bs.collapse'，function（）上{
//编写一些必要的逻辑代码…在此处添加您的类
控制台日志（“导航栏打开”）；
})
在（'hide.bs.collapse'，function（）上{
//编写一些必要的逻辑代码…在这里删除您的类
console.log（“导航栏关闭”）；
})
});







打开汉堡包时，是否可以缩小汉堡的高度（使bodyheight+hamburgerheight=windowheight），然后在顶部添加边距，使其接触底部？示例：打开汉堡包时，将样式更改为
{height:calc（100%-[hamburgerHeight]）；overflow-y:scroll；margin top:[hamburgerHeight]；padding top:0px；}
。单击移动菜单项时，需要添加额外的滚动距离。e、 例如，将下拉菜单的高度添加到equation@95faf8e76605e973你怎么能用
s做到这一点？（没有JavaScript）我最初想通过css创建一个距离，在这里我做了一个@media，并将机身的填充物发送到300px，以覆盖汉堡包菜单打开时的高度，但它在页面顶部看起来并不好，因为当菜单未打开时，我们有这么大的空白。除非有可能在javascript中说，如果汉堡打开，将填充物添加到主体，如果汉堡关闭，则移除主体的填充物。