Issue
There are a number of questions for partially collapsing Bootstrap navbars, e.g.:
Item1 Item2 Item3 Item4 Item5
Can be collapsed to:
Item1 Item2 Item3 =menu=
Or:
=menu= Item3 Item4 Item5
And so on. That works by having two navbars where one collapses and one does not.
But I want to collapse a single navbar where the items to hide are not at the edges:
Item1 Item3 Item5 =menu=
Can that be done with Bootstrap 5?
Solution
There is no Bootstrap native solution. But there is a workaround using two identical navbars.
navbar 1:
- has
d-none d-md-block(for example) for nav items that should be hidden on small screens - on large screens it shows all nav items
- it does not have a toggle button (or alternatively, it does, but the "external content" is the second navbar)
navbar 2:
- has the same navbar items, and a toggle button
- is always in a collapsed state
- on small screens it shows the toggle button; when clicked it shows a dropdown with all nav items
e.g. large screen:
Item1 Item2 Item3 Item4 Item5
e.g. small screen:
Item1 Item3 Item5 =menu=
Item1
Item2
Item3
Item4
Item5
or e.g. small screen:
=menu= Item1 Item3 Item5
Item1
Item2
Item3
Item4
Item5
Answered By – lonix
Answer Checked By – Mary Flores (AngularFixing Volunteer)