Navbar Logo fixed center and top - html

Question

I have a navbar for bootstrap 4 and the nav-brand centered on computer window, but it will moving to dropdown when expand the toggle on mobile. Does there any way to make the brand fixed on top and center?
my navbar code on html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-start" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
class="fas fa-store mr-3"></i>Product
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="...">..</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/" style="color: papayawhip"><i class="fas fa-home mr-3"></i>Home
<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="/"><img src="....." style="max-height: 60px" /></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav"><li class="nav-item">
<a>...</a>
</li>
</ul>
</div>
</nav>

Answer 1

try doing this so the navbar-brand
<a class="navbar-brand" href="#">Navbar</a>
<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>
so the navbar-brand is outside the navbarNavDropdown