Javascript Bootstrap 4导航条，带中央导航品牌标志

我试图获得与此处所示相同的导航栏：

当我开始做这项工作时，它看起来非常简单，就像5-10分钟的工作，但对于初学者来说，动手做似乎是不可能的。最大的问题是这种移动响应能力。如何创建完全相同的导航栏

我试过了，但没有比这更好的了：

这是我的密码：

HTML

---

你需要

Bootstrap的

javascript才能让导航栏工作（它需要

jQuery

），我有Bootstrap js和jQuery，但仍然不工作确保你有

Bootstrap.min.css

和

Bootstrap.min.js

，你可以看到它的工作在小提琴这里的代码，我有，我希望所有6个导航链接下的品牌标志

    <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>

@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;
    }
}