Below is the code I am using for my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
In addition, here is the CSS code from my .css file related to paddings:
@media (min-width: 992px) {
.navbar-nav > .nav-item {
padding-right: 1.5rem;
}
}
@media (min-width: 992px) {
.navbar-brand {
padding-right: 2rem;
}
}
Currently, I am experiencing an issue with alignment as shown in the following image: Wrong alignment
I have attempted to add style="vertical-align:middle" to the .css file, as well as to nav-item and nav-link, but the problem persists. Any suggestions on how I can achieve vertical alignment on the right side of the navbar with other items would be greatly appreciated.