响应式固定顶部导航栏，当展开时会填满整个屏幕，隐藏某些导航链接，并且不会滚动 [英] responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll
问题描述
我创建了一个固定顶部的bootstrap 4导航栏，该导航栏在大屏幕上展开，而在其他屏幕上折叠.我还向<body>添加了padding-top，以防止导航栏与主体内容重叠.
I have created a fixed-top bootstrap 4 navbar that is expanded on large screens, and collapsed on the others. I have also added padding-top to the <body> to prevent the navbar from overlapping the main body content.
但是，在较小的屏幕上，使用汉堡包"按钮展开折叠的导航栏时，它将展开并充满整个屏幕.然后，某些导航链接被隐藏(即，在显示之外).而且，滚动不会滚动导航栏，而只会滚动导航栏下方的主体内容.
However, on smaller screens when the collapsed navbar is expanded using the hamburger button, it expands and fills the screen. Some of the nav-links then become hidden (i.e. outside the display). Moreover,scrolling does not scroll the navbar, but only the main body content which is beneath the navbar.
是否可以将导航栏压缩为不超过屏幕大小?或者，如何启用可滚动的导航栏?
Is it possible to compress the navbar to not take up more than the screen size? Or, how do I enable a scrollable navbar?
在下面添加了图片以显示问题.
Added pictures below to show the issue.
这是移动视图中的一个快照，但没有扩展导航栏:
Here is a snap in mobile view without expanding the navbar:
以下是演示该导航栏占据整个视口的问题的快照，该链接仍然存在，但显示在外部":
And here is the snap to illustrate the problem that the navbar takes up the whole viewport, and that there are still links but "outside" the display:
如果需要，这里是JSFiddle: https://jsfiddle.net/suhaib47/ef37ht06/6/
Here is JSFiddle if needed: https://jsfiddle.net/suhaib47/ef37ht06/6/
使用@Zim提供的答案后，我现在面临另一个问题.在桌面屏幕上，导航栏将正确显示.但是，当我单击弹出的nav-items/nav-links会打开一个下拉列表时，该下拉列表位于导航栏中，并且有一个滚动条用于滚动导航栏.如何使下拉菜单显示在导航栏内容上，同时可以滚动它，但只能在折叠导航栏时显示.
After using the answer provided by @Zim, I now face a different problem. In the desktop screen, the navbar is displayed properly. However, when I click on the nav-items/nav-links which pop open a dropdown list, the dropdown list stays within the navbar and there is a scroll bar for scrolling the navbar. How do I make the dropdown menu to show over the navbar content, while at the same time it can be scrolled but only when the navbar is collapsed.
我提供了一张图片来说明我的意思:
I've included a picture to show what I mean:
图片中的滚动条用于导航条.
The scrollbar seen in the picture is for the navbar.
推荐答案
在.navbar-collapse上设置最大高度，该高度等于视口高度减去主体顶部填充量...
Set a max-height on the .navbar-collapse that's equal to viewport height minus the body top padding...
body {
overflow: hidden;
}
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}
https://www.codeply.com/go/1KXwX3I1Mh
这篇关于响应式固定顶部导航栏，当展开时会填满整个屏幕，隐藏某些导航链接，并且不会滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
