Search code examples
htmlcsstwitter-bootstrapbootstrap-4

Scrolling in sticky-top navbar Bootstrap 4


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.


Solution

  • .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 :).