How do I keep the hamburger menu in the center? - html

Question

when I display the menu it goes to the right and scrolls the user profile. I need the menu to always be in the center and the profile always to the right.
I am using angular 12 and bootstrap 5.
Below I leave the code that I am using and some images of how it should look
Thanks!
link
stackblitz
<nav
class="navbar navbar-expand-lg navbar-dark bg-primary"
>
<div class="container-fluid">
<a class="navbar-brand"
><img src="../../../assets/Targaryen.ico"
/></a>
<button
class="navbar-toggler justify-content-center"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerbur"
aria-controls="navbarTogglerbur"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur">
<ul class="navbar-nav justify-content-center mt-lg-0">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
<div class="dropdown">
<img
src="{{ info.photoURL }}"
/>
<ul
class="dropdown-menu dropdown-menu-end dropdown-menu-dark"
aria-labelledby="dropdownMenuButton1"
>
<li class="dropdown-item" >
</li>
<li class="dropdown-item" >
</li>
</ul>
</div>
</div>
</nav>

Answer 1

Simply switch the order of the navbar-nav and dropdown. Then use order-lg-last on the dropdown to keep it right on lg...
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand"><img src="//via.placeholder.com/30" /></a>
<button class="navbar-toggler justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerbur" aria-controls="navbarTogglerbur" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="dropdown order-lg-last">
<img src="//via.placeholder.com/30" />
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1">
<li class="dropdown-item">
<a href>Item</a>
</li>
<li class="dropdown-item">
<a href>Item</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur">
<ul class="navbar-nav justify-content-center mt-lg-0">
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
</ul>
</div>
</div>
</nav>
Codeply