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 nav-link home">
        <a href="https://www.weddinginsicily.co.uk/">
          HOME
          <span class="sr-only">Home</span>
        </a>C
      </li>
      <li class="nav-item nav-link">
        <a href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">OUR WEDDINGS</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 nav-link">
          <a href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">LEGALITIES</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: translateX(-50%);
  left: 50%;
  position: absolute;
}

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