Question:
I am working on a project using Bootstrap 5 for creating a sticky navigation bar in Django. The issue I am facing is that when the navigation menu expands on smaller screens, the user icon (fa-user) moves along with it. I want the user icon to remain fixed on the right side while only the navigation menu expands and collapses.
Below is the code for the navigation bar:
<nav class="navbar navbar-transparent fixed-top navbar-expand-lg">
<div class="container-fluid d-flex justify-content-arround">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img class="imagotipe" src="{% static 'img/imagotipe-white-02.svg' %}"
alt="imagotipe">
</a>
<div class="collapse navbar-collapse text-center" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Me</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
<div>
<a href="#">
<i class="fa-solid fa-user"></i>
</a>
</div>
</div>
</nav>
Problem:
The user icon (fa-user) moves with the menu when it opens or closes on smaller screens. I want the icon to stay fixed on the right side of the navigation bar while only the navigation menu should expand and collapse. How can I achieve this and make sure the user icon remains fixed on the right without moving when the menu expands or collapses?
https://i.sstatic.net/YjrBIbzx.png https://i.sstatic.net/tJbzgHyf.png