I am in need of a navigation section that is always visible on all devices, with a collapsible toggle aligned to the right.
In Bootstrap 5.2, if I place the collapse toggle after the
<div class="collapse navbar-collapse ...On the other hand, if I place the toggle code before the <div class="collapse ... as shown in the original Bootstrap example, the expanded collapsible nav aligns to the right instead of the left, which is not desired.
Is there a smoother solution to this issue? Thank you in advance!
My goal is to have a navigation section always visible on the right side, with a horizontal navigation aligning to the left on large devices and collapsing vertically on smaller devices.
I have tried creating two navbar-nav clones, one for large devices above the toggle and one below for small devices. However, there are still alignment issues on large devices. Here is an example: https://jsfiddle.net/aw9z7jmr/
[EDIT] After some experimentation, I found a workaround based on my "clone" approach. If anyone has a better solution, please let me know!
I added flex-fill to
<ul class="navbar-nav ms-0 me-auto d-none d-lg-flex flex-fill">However, I had to modify the flex-fill class as follows:
.navbar .flex-fill {flex: 100 1 auto !important;}
Here is the updated solution: https://jsfiddle.net/2orp39sh/