3

I want to create a Navbar with the brand on the center, and links available on the center, left and right. Like the one used on this site: https://www.clarks.es/

Currently, I have the next navbar, but I need the links also in the center.

<nav class="navbar navbar-dark navbar-expand-md bg-success justify-content-between">
  <div class="container-fluid">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
      <ul class="navbar-nav">
        <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>

    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Brand</a>

    <div class="navbar-collapse collapse dual-nav w-50 order-2">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="">Link 1</a></li>
        <li class="nav-item"><a class="nav-link" href="">Link 2</a></li>
      </ul>
    </div>

  </div>
</nav>
Shidersz
  • 16,846
  • 2
  • 23
  • 48
Leoh
  • 642
  • 2
  • 17
  • 41
  • This has already been [answered here](https://stackoverflow.com/questions/52827350/bootstrap-4-navbar-with-brand-center-and-links-on-the-left-center-and-right). Use the methods explained in the duplicate: https://www.codeply.com/go/a6OeSIHdLK – Carol Skelly Oct 16 '18 at 11:29

2 Answers2

7

This is my idea of how to implement a menu like the one you wanted. Note that border classes are just added for visual testing, they can be deleted. I hope this helps you.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark navbar-expand-md bg-success">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse dual-nav order-1 order-md-0">
    <ul class="navbar-nav border border-primary">
      <li class="nav-item">
        <a class="nav-link" href="#">Left Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left Link</a>
      </li>
    </ul>
  </div>

  <div class="navbar-collapse collapse dual-nav order-2 order-md-1 justify-content-end">
    <ul class="navbar-nav border border-danger">
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
    </ul>
  </div>

  <a href="/" class="navbar-brand mx-auto order-0 order-md-2 p-2">Brand</a>

  <div class="navbar-collapse collapse dual-nav order-3 order-md-3">
    <ul class="navbar-nav border border-danger">
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Center Link</a>
      </li>
    </ul>
  </div>

  <div class="navbar-collapse collapse dual-nav order-4 order-md-4 justify-content-end">
    <ul class="navbar-nav border border-primary">
      <li class="nav-item">
        <a class="nav-link" href="#">Right Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Right Link</a>
      </li>
    </ul>
  </div>

</nav>

The structure of this navbar uses, mainly, the next utilities from Bootstrap 4:

Shidersz
  • 16,846
  • 2
  • 23
  • 48
  • 1
    Thanks for your help!! @D.Smania – Leoh Oct 16 '18 at 11:36
  • Just to note here, this is reliant on the menu items being the same number of items, and the navs being the same width. If the left aligned nav has four items, and the right has three, the centred elements won't be in the centre. – Lee Mar 21 '19 at 11:00
1
***Try below code you will get what exactly you want***

    .navigation-container .navigation-header {
    padding: 25px 0 0;
    position: relative;
}

.width100 {
    width: 100%;
    position: relative;
    float: left;
}

.navigation-container .search-btn {
    background-image: url(https://s7g10.scene7.com/is/image/Pangaea2Build/IC%5FSearch?$Original$);
    background-position: center center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-top: 8px;
    position: absolute;
    left: 0;
    background-size: 100%;
    z-index: 1;
}
.pull-left {
    float: left !important;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.navigation-container .search-btn {
    background-image: url(https://s7g10.scene7.com/is/image/Pangaea2Build/IC%5FSearch?$Original$);
    background-position: center center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-top: 8px;
    position: absolute;
    left: 0;
    background-size: 100%;
    z-index: 1;
}

.navigation-container .navbar {
    width: 100%;
}
.pull-left {
    float: left !important;
}
.text-center {
    text-align: center;
}

.navigation-container .navbar .desktop-nav-bar {
    margin: 0;
    height: 63px;
    padding: 0 32px;
    overflow: hidden;
}

.navigation-container .navbar > div div {
    display: inline-block;
}
.nav-left {
    position: absolute;
    right: 50%;
    padding-right: 93px;
}



main-links {
    letter-spacing: 2px;
}
.navigation-container .navbar .nav-main-links {
    padding: 11px 35px 0;
}
.navigation-container .navbar .nav-main-links {
    display: inline-block;
    padding: 11px 20px 0;
    vertical-align: top;
}
.navigation-container .navbar > div div {
    display: inline-block;
}


.navigation-container .navbar > div div {
    display: inline-block;
}
.width100 {
    width: 100%;
    position: relative;
    float: left;
}


.navigation-container .navbar .nav-main-links a {
    color: #595959;
}
.navigation-container .navbar .nav-main-links a {
    color: #767676;
    text-transform: uppercase;
    background-image: none !important;
    margin-bottom: 35px;
}

.navigation-container .navbar .nav-main-links {
    letter-spacing: 2px;
}
.navigation-container .navbar .nav-main-links {
    padding: 11px 35px 0;
}
.navigation-container .navbar .nav-main-links {
    display: inline-block;
    padding: 11px 20px 0;
    vertical-align: top;
}
.navigation-container .navbar > div div {
    display: inline-block;
}

.width100 {
    width: 100%;
    position: relative;
    float: left;
}

.navigation-container .navbar .logo-item {
    padding: 0px 30px;
    vertical-align: top;
    position: relative;
    z-index: 1;
}
.navigation-container .navbar > div div {
    display: inline-block;
}




.navigation-container .navbar > div div {
    display: inline-block;
}



.site-logo {
    display: inline-block;
    margin-top: 2px;
}

.navigation-container .navbar .logo-item .logo {
    margin: 0;
    max-width: 111px;
}

.navigation-container .navbar > div div {
    display: inline-block;
}
.nav-right {
    position: absolute;
    left: 50%;
    padding-left: 93px;
}


.nav-main-links {
    letter-spacing: 2px;
}
.navigation-container .navbar .nav-main-links {
    padding: 11px 35px 0;
}
.navigation-container .navbar .nav-main-links {
    display: inline-block;
    padding: 11px 20px 0;
    vertical-align: top;
}
.navigation-container .navbar > div div {
    display: inline-block;
}


.navigation-container .navbar > div div {
    display: inline-block;
}
.width100 {
    width: 100%;
    position: relative;
    float: left;
}
navigation-container .navbar .nav-main-links a {
    color: #595959;
}
.navigation-container .navbar .nav-main-links a {
    color: #767676;
    text-transform: uppercase;
    background-image: none !important;
    margin-bottom: 35px;
}

.navigation-container .mini-bag {
    z-index: 101;
    background-image: url(https://s7g10.scene7.com/is/image/Pangaea2Build/IC%5FMiniCartBag?$Original$);
    background-position: center right;
    background-repeat: no-repeat;
    height: 20px;
    background-size: 20px;
    width: 31px;
    cursor: pointer;
    margin-top: 9px;
    margin-right: 3px;
    position: absolute;
    right: 0;
}
.pull-right {
    float: right !important;
}

.navigation-container .mini-bag span.mini-cart-count {
    color: #333;
    display: inline-block;
    text-align: right;
    font-size: 12px;
    vertical-align: top;
    position: relative;
    top: -5px;
    right: -1px;
}




    <div class="navigation-container width100 grey-border">
        <div class="wrapper">
            <div class="navigation-header width100 hidden-xs hidden-sm">
                <a href="#" class="search-btn js-search-btn pull-left" role="button" tabindex="0">
                    <span class="visuallyhidden">Buscar</span>
                </a>

                <div class="navbar text-center pull-left">
                    <div id="desktop-nav-bar" class="desktop-nav-bar">
                        <div class="nav-left">
                            <div class="nav-main-links" id="navbar-item-0">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/womens" role="link">Mujer</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                            <div class="nav-main-links" id="navbar-item-1">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/mens" role="link">Hombre</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="logo-item">
                            <div class="js-mega-menu-item" id="desktop-nav-logo">
                                <a href="/" rel="tag" role="link" class="js-site-logo site-logo">
                                    <img src="https://s7g10.scene7.com/is/image/Pangaea2Build/IC_Clarks_Header_Logo?$Original$"
                                        class="img js-image-responsive logo" alt="Clarks">
                                </a>
                            </div>
                        </div>
                        <div class="nav-right">
                            <div class="nav-main-links" id="navbar-item-2">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/calzado-ninos" role="link">Niños</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                            <div class="nav-main-links" id="navbar-item-3">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator ">
                                    <a href="/originals" role="link">Originals</a></div>
                                <div class="nav-pointer" style="display: none;"></div>
                            </div>
                            <div class="nav-main-links" id="navbar-item-4">
                                <div data-background-image="" class="width100 js-category js-mega-menu-item mega-menu-item mega-menu-item__separator no-children">
                                    <a href="/New-Arrivals/c/320" role="link">novedades</a></div>
                                <div class="nav-pointer"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="/cart" class="pull-right mini-bag js-mini-bag" role="link">
                    <span class="js-mini-cart-count mini-cart-count">0</span>
                    <span class="js-mini-cart-count-text" hidden="">0 Artículos en tu cesta de compra</span>
                </a>
            </div>
            <div class="mini-bag-pos">
                <div class="mini-bag-container pull-right js-mini-bag-data" data-tablet-moveto="#mobile-header-data" style="display: none;">
                    <div class="upward-arrow hidden-xs"></div>
                    <div class="mini-bag-cotent width100">
                        <a href="/cart" class="mini-cart-link js-mini-cart-link" data-mini-cart-url="/cart/rollover/minicart"
                            data-mini-cart-refresh-url="/cart/minicart/SUBTOTAL" data-mini-cart-name="CESTA"
                            data-mini-cart-empty-name="Tu cesta está vacía" role="link">
                        </a>

                        <input id="miniBagTimer" type="hidden" value="3000">

                        <div class="mini-bag-header width100">
                            <div class="width100">
                                <div class="pull-left">
                                    <span>MÉTODOS Y COSTES DE ENVÍO</span><span class="get-expand js-get-expand">+</span>
                                </div>
                                <div class="bill-amount pull-right">
                                    <span class="mini-cart-price js-mini-cart-price">0,00 €</span>
                                </div>
                            </div>

                            <div class="expanded-content width100 js-expanded-content">
                            </div>

                        </div>
                        <div class="mini-cart-container js-mini-cart-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
Vikranth Reddy B
  • 59
  • 11