Group items into dropdown menu when collapsed - css

Question

I have just found this type of collapse navbar from a site, all menu items grouped into a dropdown menu and positioned right, its different from usual bootstrap collapse navbar
Sorry for having not enough reputations to post image
https://i.imgur.com/EFzI7hl.png
https://i.imgur.com/DhS4BlZ.png
I have tried many suggestions but it didnt work exactly like what theirs did, the result is always full vertical dropdown menu
https://i.imgur.com/s5O7cSD.png
My code
<nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #0d47a1;">
<a class="navbar-brand" href="/dashboard/">
<img src="/images/logo.webp" width="40" height="40" alt="">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-2">
<a class="nav-link" href="#">Shop Manager</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Customer Care</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#">Messenger Order</a>
</li>
</ul>
</div>
</nav>

Answer 1

You'll need to add a little custom css to get the menu smaller that full width:
.navbar-collapse {
position: absolute;
right: 0;
top: 40px;
background-color: #333;
}
#media (min-width: 768px) {
.navbar-collapse {
background-color: transparent;
position: initial; /* Using 'initial' here rather than specificing 'relative'.*/
}
}
Here is a fiddle showing it working. You can customize it form there to get it looking like the examples you provided, but that's the rough idea.