Bootstrap 5：如何在最右边对齐导航折叠切换但在小型设备上仍然向下折叠？

Question

I'd like to have an always visible on all devices nav section and the collapse toggle aligned to the right .

Now if putting the collapse toggle after the <div class="collapse navbar-collapse... in Bootstrap 5.2 , the collapsible collapses upwards, moving all the content / elements - after it - downwards like this: https://jsfiddle.net/qavsom61/1/

If I put the toggle code before the <div class="collapse... like in the original bootstrap example , the expanded collapsible nav is now aligned to the right instead of the left which I don't want.

Is there any "smooth" solution to it? Thx in advance!!

As said and as you can see on fiddle above I'd like to have an always visible nav section positioned on the right side. And another horizontal nav aligned to the left on large devices which collapses down vertically on small devices .

The only thing I could think of was to create 2 navbar-nav clones one for large devices above the toggle and one below the toggle for small devices . But despite not being as smooth (#clones) there are some other issues. like both the navs are aligned left on large devices no matter what I've tried so far?: Take a look here: https://jsfiddle.net/aw9z7jmr/

---

[EDIT] I just played around and found a not so pleasant solution based on my "clone" approach above. So if anyone got a better solution let me know please!

I added flex-fill to <ul class="navbar-nav ms-0 me-auto d-none d-lg-flex flex-fill">

but I had to modify the flex-fill class like this

.navbar .flex-fill {flex: 100 1 auto !important;}

https://jsfiddle.net/2orp39sh/

Answer 1

remove " navbar-expand-lg " in nav tag

and d-lg-none in navbar-collapse

https://jsfiddle.net/2r7oy0bj/2/