Partially collapsed Bootstrap navbar with hidden items not at edges

Question

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?

Answer 1

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

Answer 2

First of all its hard to tell the exact solution without seeing the code. If the number of menus are limited then you can do it with media queries (apply style to all navbar options except first 2 and last one. Another way is with javascript, (can make a condition according to screen size to trigger event). It will be much easier if you share the piece of code you having trouble with.