'Bootstrap hamburger menu when menu contains too many menu items

Bootstrap has this feature of collapsing menu items in the navbar to a hamburger menu when certain window size breakpoints are reached. However, I sometimes find that even on bigger size screens that wouldn't trigger this responsive hamburger button behaviour (because they are well beyond the breakpoint), the hamburger button should appear when the navbar gets too full (i.e. when there are too many menu items).

Is there a way to accomplish this, preferably built-in, or with css/html only or minimal JS effort? Has anyone tried this before and can share code and experiences?



Solution 1:[1]

So I am somewhat shooting in the dark on this answer but I think I understand. The Bootstrap Docs provide examples and the Navbar example is a good resource to see the flexibility and responsive classes that are available.

Aside from the .navbar-expand-lg classes, Bootstrap doesn't have the native functionality to know when to collapse or not.

Maybe these JavaScript solutions that I have may inspire.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1