JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
  <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item home">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/">
          HOME
          <span class="sr-only">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">
          OUR WEDDINGS
          <span class="sr-only">Our Weddings</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="mx-auto order-0 order-xl-2 navbar-brand-container">
    <a class="navbar-brand mx-auto" href="/">
      <img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127">
    </a>
  </div>
  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">
          LEGALITIES
          <span class="sr-only">Legalities</span>
        </a>
      </li>
    </ul>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

CSS

.navbar-brand {
  transform: translate(-50%, -50%);
  left: 50%;
  position: absolute;
}

.navbar-toggler: {
  z-index: 10;
}