响应式固定顶部导航条在展开时填充屏幕，隐藏一些导航链接，并且不滚动

Question

我创建了一个固定顶部的bootstrap 4 navbar，它在大屏幕上展开，在其他屏幕上折叠。我还将padding-top添加到中，以防止navbar与主体内容重叠。

但是，在较小的屏幕上，当使用hamburger按钮展开折叠的navbar时，它会展开并填充屏幕。然后，一些导航链路变得隐藏（即在显示器之外）。此外，滚动不滚动navbar，而只滚动navbar下面的主体内容。

有没有可能压缩navbar以不占用超过屏幕大小的空间？或者，我如何启用一个可滚动的navbar？

添加了下面的图片以显示问题。

如果需要，这里有JSFiddle:https://jsfidle.net/suhaib47/ef37ht06/6/

null

null

在使用@zim提供的答案后，我现在面临一个不同的问题。在桌面屏幕中，正确显示navbar。然而，当我点击弹出打开下拉列表的导航项/导航链接时，下拉列表会停留在导航条内，并且有一个滚动条用于滚动导航条。我如何使下拉菜单显示在navbar内容上，同时它可以滚动，但只有当navbar折叠。

图中看到的滚动条是用于导航条的。

Answer 1

在.navbar-collable上设置一个max-height,该值等于视区高度减去正文顶部填充...

body {
  overflow: hidden;
}

.fixed-top .navbar-collapse {
  max-height: calc(100vh - 4.5em);
  overflow-y: auto;
}

https://www.codepley.com/go/1kxwx3i1mh