Bootstrap 4 logo position center on desktop

Question

I am having a problem with bootstrap 4 responsive navbar. On smaller screens works as expected (logo in the centre, hamburger menu on the right) The problem occurs on larger screens (desktop) where the logo and login button are pushed to the left side of the page. Logo should be positioned at the absolute centre and login button where the text ends. I tried using flexbox but couldn't get the desired effect.

<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand brand text-center mx-auto" href="#">
    <h2>LOGO</h2>
    <h5>title</h5>
  </a>
  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <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="#">LOGIN</a>
      </li>
    </ul>
  </div>
</nav>

Whole code available on codeply https://www.codeply.com/go/uYvbe1Hsdh.

Answer 1

You'll need to use a empty spacer element so that the flexbox items (navbar contents) distribute evenly within the navbar. This will allow the logo to be centered.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="flex-grow-1"><!--spacer--></div>
        <a class="navbar-brand brand text-center company mx-auto flex-grow-1" href="#">
            <h2>GRADBENI E-DNEVNIK</h2>
            <h5>ELEKTRONSKI GRADBENI DNEVNIK</h5>
        </a>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-1" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">PRIJAVA</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings 
flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral 
fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, 
Helvetica Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
</div>

https://www.codeply.com/go/WQ716SdyNg

Similar questions:
Center an element in Bootstrap 4 Navbar
Bootstrap NavBar with left, center or right aligned items