Bootstrap 4 nav-bar vertical-align issue-CodePudding

Here is a code for my navbar:

<nav >
    <a  href="/">BRAND</a>
    
    <div >
        <ul >
            {% if user.is_authenticated %}
            <li >
                <a  href="#">ITEM 1</a>
            </li>
            <li >
                <a  href="#">ITEM 2</a>
            </li>
            <li >
                <a  href="#">ITEM 3</a>
            </li>
            {% endif %}
        </ul>
    
        <ul >
            {% if user.is_authenticated %}
            <li >
                <p >Logged in as:</p> 
            </li>
            <li >
                <a  href="/logout">Logout</a>
            </li>
            {% else %}
            <li >
                <a  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.

CodePudding user response：

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 >
<a  href="/">BRAND</a>

<div >
    <ul >
        {% if user.is_authenticated %}
        <li >
            <a  href="#">ITEM 1</a>
        </li>
        <li >
            <a  href="#">ITEM 2</a>
        </li>
        <li >
            <a  href="#">ITEM 3</a>
        </li>
        {% endif %}
    </ul>

    <ul >
        {% if user.is_authenticated %}
        <li >
            <p >Logged in as:</p> 
        </li>
        <li >
            <a  href="/logout">Logout</a>
        </li>
        {% else %}
        <li >
            <a  href="/login">Login</a>
        </li>
        {% endif %}
    </ul>
</div>
</nav>