First of all, this response is a GAMBIAR! (and there is 100% collapse animation). The way you mounted this Nav is totally wrong if you check the Bootstrap 4 official documentation. link
To start with you have two Nav with the same ID , and you only have a button to open two different navs ... this structure is wrong according to the documentation ... You would have to redo this nav and include all the items inside it, but adjusting the CSS to get the way you want and not put another HTML block with Nav in your document
Ok now let's get into the problem. First rename the ID of the second nav , now create a CSS to show the second nav if the first nav receives the show class from the script.
.collapse.navbar-collapse.show + .collapse {
display: block;
}
So if the first nav is shown the second one is shown too!
See the code working. But I do not know if your project will work, because it can suffer with some css that you have already done there. Also, strongly recommend that you review the structure of these navs to see how best to put the two menus in a nav only, and not use two navs as you did ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.collapse.navbar-collapse.show + .collapse {
display: block;
}
</style>
</head>
<body>
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Importação</a>
</li>
<span class="linha-vertical"></span>
<li class="nav-item">
<a class="nav-link" href="#">Exportação</a>
</li>
<span class="linha-vertical"></span>
<li class="nav-item">
<a class="nav-link" href="#">Curso de Instrutor</a>
</li>
<span class="linha-vertical"></span>
<li class="nav-item">
<a class="nav-link" href="#">Assessoria Jurídica</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Vendas</a>
</li>
<span class="linha-vertical"></span>
<li class="nav-item">
<a class="nav-link" href="#">Consultores</a>
</li>
<span class="linha-vertical"></span>
<li class="nav-item">
<a class="nav-link" href="#">Relatórios</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
