Bootstrap 4 navbar with center nav-brand logo

I'm trying to get the same navbar as seen on here: LINK

When I started doing it, it seemed to be really easy and like 5-10 minutes work but hands on it seems impossible for a beginner. Biggest problem is this mobile responsiveness. How can I create the exact same navbar?

I have tried but haven't got any better than this:

Codepen

Here is my code:

HTML

<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#"><img src="https://www.upload.ee/image/8361734/OdysseyLogo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

And CSS

@media (min-width: 992px) {
    .navbar {
        height:80px;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
}