Align the "Nav-item" to the right, leave centered

Question

In my navbar, I have a login button, which wanted to align right, float, align-items and text-align does not work, how could I do that?

And when you’re not logged in (https://awme.herokuapp.com )it’s all aligned, but when I log in with Discord, it shows the avatar and shuts down The image is 30x30

The [html-jinja2] code of my navbar (cutting some parts) is like this:

<header class="header ">
    <nav class="navbar-expand-md navbar navbar-dark">
        <a href="/" class="navbar-brand"><img src="/static/img/awme_logo.png?size=100" alt="Awme" title="Início"></a>
        <button class="navbar-toggler menu-i" data-toggle="collapse" data-target="#HeaderNavbar" onclick="this.classList.toggle('active')">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="HeaderNavbar">
            <ul class="navbar-nav">
                <li class="nav-item"><a href="/commands/" class="nav-link"><i class="fas fa-terminal"></i> Comandos</a></li>
                <li class="nav-item"><a href="/about/" class="nav-link"><i class="fas fa-robot"></i> Sobre</a></li>
                <li class="nav-item"><a href="/invite/" class="nav-link" target="_blank"><i class="fab fa-discord"></i> Convite</a></li>
                <li class="nav-item {% if logged %}dropdown{% endif %}">
                    {% if logged %}
                    <a href="#" id="user_dropdown" role="button" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class='user-avatar' src='https://cdn.discordapp.com/avatars/{{ user["id"] }}/{{ user["avatar"] }}.webp'> {{ user["username"] }}</a>
                    <div class="dropdown-menu bg-dark" aria-labelledby="user_dropdown">
                        <a class="nav-link" href="/api/logout" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Deslogar</a>
                    </div>
                    {% else %}
                    <a class="nav-link" href="{{ login_url }}"><i class="fas fa-sign-in-alt"></i> Logar</a>
                    {% endif %}
                </li>
            </ul>
        </div>
    </nav>
    <div class="head_sep"></div>
</header>

Answer 1

Kaigo does the following:

First strip the li that you want to go right and put him in a ul separate. Then add mr-auto in the first class ul. The code will look like this:

<div class="collapse navbar-collapse" id="HeaderNavbar">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a href="/commands/" class="nav-link"><i class="fas fa-terminal"></i> Comandos</a></li>
        <li class="nav-item"><a href="/about/" class="nav-link"><i class="fas fa-robot"></i> Sobre</a></li>
        <li class="nav-item"><a href="/invite/" class="nav-link" target="_blank"><i class="fab fa-discord"></i> Convite</a></li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item {% if logged %}dropdown{% endif %}">
                {% if logged %}
                <a href="#" id="user_dropdown" role="button" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class='user-avatar' src='https://cdn.discordapp.com/avatars/{{ user["id"] }}/{{ user["avatar"] }}.webp'> {{ user["username"] }}</a>
                <div class="dropdown-menu bg-dark" aria-labelledby="user_dropdown">
                    <a class="nav-link" href="/api/logout" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Deslogar</a>
                </div>
                {% else %}
                <a class="nav-link" href="{{ login_url }}"><i class="fas fa-sign-in-alt"></i> Logar</a>
                {% endif %}
        </li>
    </ul>
</div>

Answer 2

Put the class w-100 and align-items-center in ul.navbar-nav so that it occupies the entire width of the navbar and allows the elements to be vertically centered, and place the class ml-auto in li you want to line up right.

The class ml-auto (margin-left: auto) will apply an automatic left margin to the previous element causing the li align in the right corner.

Also add two classes in the login dropdown to align to the right and give a right corner margin: dropdown-menu-right and mr-4:

<div class="dropdown-menu dropdown-menu-right mr-4 bg-dark" aria-labelledby="user_dropdown">

Also put the class pl-1 On the dislodge link to give a left padding.

Add @media query to your CSS to adjust elements when the screen width is less than 768px:

@media screen and (max-width: 767px){

   #HeaderNavbar > ul{
      align-items: flex-start !important;
   }

   #HeaderNavbar > ul li.ml-auto{
      margin-left: inherit !important;
   }

   #HeaderNavbar > ul li.ml-auto .mr-4{
      margin-right: inherit !important;
   }

}

Example:

body{
   background: black !important;
}

@media screen and (max-width: 767px){
   
   #HeaderNavbar > ul{
      align-items: flex-start !important;
   }

   #HeaderNavbar > ul li.ml-auto{
      margin-left: inherit !important;
   }

   #HeaderNavbar > ul li.ml-auto .mr-4{
      margin-right: inherit !important;
   }
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header class="header ">
    <nav class="navbar-expand-md navbar navbar-dark">
        <a href="/" class="navbar-brand"><img src="/static/img/awme_logo.png?size=100" alt="Awme" title="Início"></a>
        <button class="navbar-toggler menu-i" data-toggle="collapse" data-target="#HeaderNavbar" onclick="this.classList.toggle('active')">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="HeaderNavbar">
            <ul class="navbar-nav w-100 align-items-center">
                <li class="nav-item"><a href="/commands/" class="nav-link"><i class="fas fa-terminal"></i> Comandos</a></li>
                <li class="nav-item"><a href="/about/" class="nav-link"><i class="fas fa-robot"></i> Sobre</a></li>
                <li class="nav-item"><a href="/invite/" class="nav-link" target="_blank"><i class="fab fa-discord"></i> Convite</a></li>
                <li class="nav-item ml-auto">
                  <a href="#" id="user_dropdown" role="button" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class='user-avatar' src='http://1.gravatar.com/avatar/dbd1337cc4d72037894eaf55e5c35752?s=40&d=mm&r=g'> {{ user["username"] }}</a>
                  <div class="dropdown-menu dropdown-menu-right mr-4 bg-dark" aria-labelledby="user_dropdown">
                     <a class="nav-link pl-1" href="/api/logout" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Deslogar</a>
                  </div>
                </li>
            </ul>
        </div>
    </nav>
    <div class="head_sep"></div>
</header>