After numerous hours of researching and trying different methods, I am unable to figure out how to relocate the Logout button from within my Navbar to the far right of the screen.
I have experimented with various examples I discovered online, such as creating a new nav bar, setting the float to right, and aligning the text to the right, but nothing seems to work.
Please see the HTML/Django code attached below:
navbar.html:
<nav class="navbar navbar-expand-lg navbar-light bg-light p-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" style="height: 4rem;">
<li class="nav-item">
<a class="nav-link p-3" href="{% url 'signed in' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link p-3" href="{% url 'add meal' %}">Add Meal</a>
</li>
<li class="nav-item">
<a class="nav-link p-3" href="{% url 'view private profile' %}">View Private Profile</a>
</li>
<li class="nav-item">
<a class="nav-link p-3" href="{% url 'view food log' %}">Food Log</a>
</li>
<li class="nav-item">
<a class="nav-link p-3" href="{% url 'view friends' %}">Friends</a>
</li>
<li class="nav-item">
<a class="nav-link p-3" href="{% url 'settings' %}">Settings</a>
</li>
<li class="nav-item" style="float: right">
<a class="nav-link p-3" href="{% url 'logout' %}" style="background-color: #e85c29">Logout</a>
</li>
</ul>
</div>
</nav>
Thank you for your assistance.