Сделать панель навигации разделенной, но отзывчивой

Question

Привет, я хочу сделать мой nav-bar сплит, как ссылка . Ниже мой html

Ниже мой nav-bar вид

Я хочу поместить SuperHosting между Megamenu и Blocks, но он должен быть отзывчивым. Простым способом было поместить HTML между этими двумя. Но это не было отзывчивым. Я застрял, любая помощь приветствуется!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light blank-menu white-text-menu">
    <div class="container">
        <a class="navbar-brand" href="">
            <div class="logo-brand md-logo">
                <h3>Super<span>Hosting</span></h3>
            </div>
        </a>
        <!-- end of navbar-brand -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-right">
                <ul class="navbar-nav my-2 my-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <!-- end of nav-item -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Samples
                        </a>
                        <ul class="dropdown-menu dropdown-list" aria-labelledby="navbarDropdown-1">

                    </li>
                    <!-- end of nav-item -->
                    <li class="nav-item dropdown dropdown-double mega-dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Megamenu
                        </a>
                        <div class="dropdown-menu dropdown-list-double mega-dropdown-list" aria-labelledby="navbarDropdown1">
                            <ul>

                            </ul>
                            <ul>

                            </ul>
                            <ul>

                            </ul>
                            <ul>

                            </ul>
                        </div>
                    </li>
                    <!-- end of nav-item -->
                    <li class="nav-item dropdown dropdown-double">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        BLocks
                        </a>
                        <div class="dropdown-menu dropdown-list-double" aria-labelledby="navbarDropdown2">
                            -->
                        </div>
                    </li>
                    <!-- end of nav-item -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Contact
                        </a>
                        <ul class="dropdown-menu dropdown-list" aria-labelledby="navbarDropdown-6">

                        </ul>
                    </li>
                    <!-- end of nav-item -->
                    </ul>
                    <!-- end of navbar-nav -->
            </div>
            <!-- end of navbar-right -->
        </div>
        <!-- end of collapse -->
        <div class="header-button">
            <a href="#" class="get-button btn btn-round btn-primary auto-width hosting-btn-element">Login</a>
        </div>
        <!-- end of header-button -->
    </div>
    <!-- end of container -->
</nav>
<!-- end of navbar -->

Answer 1

Попробуй указать свой nav-бренд position:absolute;

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of logo width */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light blank-menu white-text-menu">
     <div class="container">
        <a class="brand" style="margin: 0; float: none; text-align:center" href="#">
              <h3>Super<span>Hosting</span></h3>
        </a><!-- end of navbar-brand -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <div class="navbar-right">
              <ul class="navbar-nav my-2 my-lg-0">
                 <li class="nav-item active">
                    <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
                 </li><!-- end of nav-item -->
                 <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Samples
                    </a>
                    <ul class="dropdown-menu dropdown-list" aria-labelledby="navbarDropdown-1">

                 </li><!-- end of nav-item -->
                 <li class="nav-item dropdown dropdown-double mega-dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Megamenu
                    </a>
                    <div class="dropdown-menu dropdown-list-double mega-dropdown-list" aria-labelledby="navbarDropdown1">
                       <ul>

                       </ul>
                       <ul>

                       </ul>
                       <ul>

                       </ul>
                       <ul>

                       </ul>
                    </div>
                 </li><!-- end of nav-item -->
                 <li class="nav-item dropdown dropdown-double">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    BLocks
                    </a>
                    <div class="dropdown-menu dropdown-list-double" aria-labelledby="navbarDropdown2">
                    -->
                    </div>
                 </li><!-- end of nav-item -->
                 <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Contact
                    </a>
                    <ul class="dropdown-menu dropdown-list" aria-labelledby="navbarDropdown-6">

                    </ul>
                 </li><!-- end of nav-item -->
              </ul><!-- end of navbar-nav -->
           </div><!-- end of navbar-right -->
        </div><!-- end of collapse -->
        <div class="header-button">
           <a href="#" class="get-button btn btn-round btn-primary auto-width hosting-btn-element">Login</a>
        </div><!-- end of header-button -->
     </div><!-- end of container -->
  </nav><!-- end of navbar -->