Problems when Navbar expands (other itens are going down together) - html

Question

I'm making my first project as a programmer, and I found myself with a trouble that I'm not making to solve.
I made a navbar that expands. But, when it is expanding, other elements are going down too. I don't know the reason, and after two days trying to solve the problem, I got no success.
Here is an image that illustrates the situation:
Then, here is my code:
<header id="aermenu" class="sticky-top">
<div class="container">
<div class="row">
<div id="saudacoes" class="col-1 order-lg-1 order-2 align-self-center">
<p class="pt-3">Saudações, <br/> <span>Usuário</span></p>
</div>
<div class="col-lg-8 col-2 offset-lg-1 order-lg-2 order-1">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler mt-3" data-toggle="collapse" data-target="#menubar">
<span class="fas fa-bars text-white"></span>
</button>
<div class="collapse navbar-collapse" id="menubar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="aeraer.html" class="nav-link" onmouseover="aerhvr(this,'on')" onmouseleave="aerhvr(this,'off')">
<img src="imagens/bt-aer.png" class="img-fluid btu" id="btaer"/>
<img src="imagens/bt-aer-on.png" class="img-fluid btu" id="btaeron"/>
</a>
</li>
<li class="nav-item">
<a href="aerlogin.html" class="nav-link" onmouseover="loginhvr(this,'on')" onmouseleave="loginhvr(this,'off')">
<img src="imagens/bt-login.png" class="img-fluid btu" id="btlogin"/>
<img src="imagens/bt-login-on.png" class="img-fluid btu" id="btloginon"/>
</a>
</li>
<li class="nav-item">
<a href="aerplay.html" class="nav-link" onmouseover="playhvr(this,'on')" onmouseleave="playhvr(this,'off')">
<img src="imagens/bt-play.png" class="img-fluid btu" id="btplay"/>
<img src="imagens/bt-play-on.png" class="img-fluid btu" id="btplayon"/>
</a>
</li>
<li class="nav-item">
<a href="aerequipe.html" class="nav-link" onmouseover="equipehvr(this,'on')" onmouseleave="equipehvr(this,'off')">
<img src="imagens/bt-equipe.png" class="img-fluid btd" id="btequipe"/>
<img src="imagens/bt-equipe-on.png" class="img-fluid btd" id="btequipeon"/>
</a>
</li>
<li class="nav-item">
<a href="aerrank.html" class="nav-link" onmouseover="rankhvr(this,'on')" onmouseleave="rankhvr(this,'off')">
<img src="imagens/bt-rank.png" class="img-fluid btd" id="btrank"/>
<img src="imagens/bt-rank-on.png" class="img-fluid btd" id="btrankon"/>
</a>
</li>
<li class="nav-item">
<a href="aercontato.html" class="nav-link" onmouseover="contatohvr(this,'on')" onmouseleave="contatohvr(this,'off')">
<img src="imagens/bt-contato.png" class="img-fluid btd" id="btcontato"/>
<img src="imagens/bt-contato-on.png" class="img-fluid btd"id="btcontatoon"/>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-2 order-3 align-self-center ml-auto d-none d-sm-block">
<div class="justify-items-end" >
<img src="imagens/joker-sign.png" class="img-fluid jsign"/>
</div>
</div>
</div>
</div>
</header>
If someone could help me to understand where I'm making some mistake, I would be grateful.
(Also, if you need to me to bring here other parts of the code, like CSS or JS, just tell me. I really think the problem is with the HTML part, but I don't know where).

Answer 1

i made it for you, content is not exactly you want but i give you idea of that,
if you need logo in your right side simply add your image after navbar-toggler class so it pull right and for your p tag name called Saudações, <br/> <span>Usuário give it class mr-auto so it pull left and give additional margin you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<p class="mr-auto ml-5">Saudações, <br/> <span>Usuário</span></p>
<img class="navbar-brand" style="width: 50px;" src="pdfs/img/lol1.jpg">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>