滚动粘性导航栏Bootstrap 4

Question

I have a problem because I've made navbar, which is sticky-top and it has got a few dropdowns ( and many buttons in each drop-down). So if device's height is too small it's cropped and I can get buttons that are lower. I need to know how to add scrolling on that navbar.

At this moment it works like that (using bootstrap 4.0) https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/

and in bootstrap 3.3.7 it was easier and it looks like this: https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/

Just change the height of windows to 300px and u will see the effect. I need help with adding scrolling to the sticky-top collapsed navbar.

Answer 1

.fixed-top {
  max-height: 100vh;
  overflow: auto;
}

...fixes it. However, it creates another, smaller problem: a double scrollbar. However, this is not a problem on mobiles, because most mobiles only show the scrollbar when it's being used. (It's only a problem on desktop browsers, when you're testing it with browser window very small, in non-mobile mode). So, in practice, it's not a problem :).

Answer 2

I have better results with this:

#nav_collapse {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // mobile safari
    max-height: 90vh;
}

It's almost the same but a little more precise