Bootstrap 4 nav-bar vertical-align issue

October 7, 2022

Here is a code 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>

And here is my .css file for paddings, and I am guessing that something has to be added here, but I can’t figure out what..

@media (min-width: 992px) {
    .navbar-nav > .nav-item {
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 992px) {
    .navbar-brand {
      padding-right: 2rem;
    }
  }

What happens is this:

Wrong alignment

What do I need to do, to get the right side of the navbar to verically align with other items? I have tried to include style="vertical-align:middle to the .css file and to nav-item and nav-link, but it doesn’t help.

>Solution :

there is problem with P tag which has text ‘Logged in As’.

P tag has margin bottom which is creating problem with alignment.

so you can remove that margin using mb-0 class.

<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 mb-0">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>