Partially collapsed Bootstrap navbar with hidden items not at edges

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)

Leave a Reply

Your email address will not be published.