<div class="u-header__section g-brd-bottom g-brd-gray-light-v4 g-bg-black g-transition-0_3">
          <div class="container">
            <div class="row justify-content-between align-items-center g-mx-0--lg">
              <div class="col-sm-auto g-hidden-sm-down">
                  
                <!-- Social Icons -->
                [#if false]
                <ul class="list-inline g-py-14 mb-0">
                  <li class="list-inline-item">
                    <a class="g-color-white-opacity-0_8 g-color-primary--hover g-pa-3" href="#!">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="g-color-white-opacity-0_8 g-color-primary--hover g-pa-3" href="#!">
                      <i class="fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="g-color-white-opacity-0_8 g-color-primary--hover g-pa-3" href="#!">
                      <i class="fa fa-tumblr"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="g-color-white-opacity-0_8 g-color-primary--hover g-pa-3" href="#!">
                      <i class="fa fa-pinterest-p"></i>
                    </a>
                  </li>
                  <li class="list-inline-item">
                    <a class="g-color-white-opacity-0_8 g-color-primary--hover g-pa-3" href="#!">
                      <i class="fa fa-google"></i>
                    </a>
                  </li>
                </ul>
                [/#if]
                <!-- End Social Icons -->
              </div>

              <div class="col-sm-auto g-hidden-sm-down g-color-white-opacity-0_6 g-font-weight-400 g-pl-15 g-pl-0--sm g-py-14">
                <i class="icon-communication-163 u-line-icon-pro g-font-size-18 g-valign-middle g-color-white-opacity-0_8 g-mr-10 g-mt-minus-2"></i>
                8 800 1234 4321
              </div>

              <div class="col-sm-auto g-pos-rel g-py-14">
                <!-- List -->
                <ul class="list-inline g-overflow-hidden g-pt-1 mb-0">
                  <!-- Currency -->
                  <li class="list-inline-item">
                    <a id="currency-dropdown-invoker-2" class="g-color-white-opacity-0_6 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="#!" aria-controls="currency-dropdown-2" aria-haspopup="true" aria-expanded="false" data-dropdown-event="hover" data-dropdown-target="#currency-dropdown-2" data-dropdown-type="css-animation" data-dropdown-duration="300" data-dropdown-hide-on-scroll="false" data-dropdown-animation-in="fadeIn" data-dropdown-animation-out="fadeOut">
                      <i class="g-ml-20--md mr-2 fa fa-euro"></i>
                      Euro
                    </a>
                    <ul id="currency-dropdown-2" class="list-unstyled u-shadow-v29 g-pos-abs g-left-0 g-bg-white g-width-160 g-pb-5 g-mt-19 g-z-index-2 u-dropdown--css-animation u-dropdown--hidden" aria-labelledby="currency-dropdown-invoker-2" style="animation-duration: 300ms; left: 0px;">
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <i class="mr-2 fa fa-euro"></i>
                          Euro
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <i class="mr-2 fa fa-dollar"></i>
                          US Dollars
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <i class="mr-2 fa fa-gbp"></i>
                          GBP
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <i class="mr-2 fa fa-yen"></i>
                          Yen
                        </a>
                      </li>
                    </ul>
                  </li>
                  <!-- End Currency -->

                  <li class="list-inline-item g-color-white-opacity-0_3 g-mx-4">|</li>

                  <!-- Language -->
                  <li class="list-inline-item">
                    <a id="languages-dropdown-invoker-2" class="g-color-white-opacity-0_6 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="#!" aria-controls="languages-dropdown-2" aria-haspopup="true" aria-expanded="false" data-dropdown-event="hover" data-dropdown-target="#languages-dropdown-2" data-dropdown-type="css-animation" data-dropdown-duration="300" data-dropdown-hide-on-scroll="false" data-dropdown-animation-in="fadeIn" data-dropdown-animation-out="fadeOut">
                      <svg xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                        <defs>
                          <clipPath id="a">
                            <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"></path>
                          </clipPath>
                        </defs>
                        <g clip-path="url(#a)" transform="translate(80) scale(.94)">
                          <g stroke-width="1pt">
                            <path fill="#006" d="M-256 0H768.02v512.01H-256z"></path>
                            <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"></path>
                            <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"></path>
                            <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"></path>
                          </g>
                        </g>
                      </svg>
                      English
                    </a>
                    <ul id="languages-dropdown-2" class="list-unstyled u-shadow-v29 g-pos-abs g-bg-white g-width-160 g-pb-5 g-mt-19 g-z-index-2 u-dropdown--css-animation u-dropdown--hidden" aria-labelledby="languages-dropdown-invoker-2" style="animation-duration: 300ms; right: -72px;">
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <svg class="mr-1 g-ml-minus-10" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                            <defs>
                              <clipPath id="a">
                                <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"></path>
                              </clipPath>
                            </defs>
                            <g clip-path="url(#a)" transform="translate(80) scale(.94)">
                              <g stroke-width="1pt">
                                <path fill="#006" d="M-256 0H768.02v512.01H-256z"></path>
                                <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"></path>
                                <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"></path>
                                <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"></path>
                              </g>
                            </g>
                          </svg>
                          English
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <svg class="mr-1 g-ml-minus-10" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                            <g stroke-width="1pt" fill-rule="evenodd">
                              <path fill="#fff" d="M0 0h640v480H0z"></path>
                              <path fill="#00267f" d="M0 0h213.33v480H0z"></path>
                              <path fill="#f31830" d="M426.67 0H640v480H426.67z"></path>
                            </g>
                          </svg>
                          Spanish
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <svg class="mr-1 g-ml-minus-10" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                            <g fill-rule="evenodd" stroke-width="1pt">
                              <path fill="#fff" d="M0 0h640v480H0z"></path>
                              <path fill="#0039a6" d="M0 160.003h640V480H0z"></path>
                              <path fill="#d52b1e" d="M0 319.997h640V480H0z"></path>
                            </g>
                          </svg>
                          Russian
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="#!">
                          <svg class="mr-1 g-ml-minus-10" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                            <path fill="#ffce00" d="M0 320h640v160.002H0z"></path>
                            <path d="M0 0h640v160H0z"></path>
                            <path fill="#d00" d="M0 160h640v160H0z"></path>
                          </svg>
                          German
                        </a>
                      </li>
                    </ul>
                  </li>
                  <!-- End Language -->
                </ul>
                <!-- End List -->
              </div>

              <div class="col-sm-auto g-pos-rel g-py-14">
                <!-- List -->
                <ul class="list-inline g-overflow-hidden g-pt-1 g-mx-minus-4 mb-0">
                  <li class="list-inline-item g-mx-4">
                    <a class="g-color-white-opacity-0_6 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="page-our-stores-1.html">Our Stores</a>
                  </li>

                  <li class="list-inline-item g-color-white-opacity-0_3 g-mx-4">|</li>
                  <li class="list-inline-item g-mx-4">
                    <a class="g-color-white-opacity-0_6 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="page-help-1.html">Help</a>
                  </li>

                  <li class="list-inline-item g-color-white-opacity-0_3 g-mx-4">|</li>
                  <!-- Account -->
                  <li class="list-inline-item">
                    <a id="account-dropdown-invoker-2" class="g-color-white-opacity-0_6 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="#!" aria-controls="account-dropdown-2" aria-haspopup="true" aria-expanded="false" data-dropdown-event="hover" data-dropdown-target="#account-dropdown-2" data-dropdown-type="css-animation" data-dropdown-duration="300" data-dropdown-hide-on-scroll="false" data-dropdown-animation-in="fadeIn" data-dropdown-animation-out="fadeOut">
                      Account
                    </a>
                    <ul id="account-dropdown-2" class="list-unstyled u-shadow-v29 g-pos-abs g-bg-white g-width-160 g-pb-5 g-mt-19 g-z-index-2 u-dropdown--css-animation u-dropdown--hidden" aria-labelledby="account-dropdown-invoker-2" style="animation-duration: 300ms; right: -100px;">
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="page-login-1.html">
                          Login
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="page-signup-1.html">
                          Signup
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="page-wishlist-1.html">
                          Wishlist
                        </a>
                      </li>
                      <li>
                        <a class="d-block g-color-black g-color-primary--hover g-text-underline--none--hover g-font-weight-400 g-py-5 g-px-20" href="page-orders-1.html">
                          Your Orders
                        </a>
                      </li>
                    </ul>
                  </li>
                  <!-- End Account -->
                </ul>
                <!-- End List -->
              </div>

              <div class="col-sm-auto g-pr-15 g-pr-0--sm">
                <!-- Basket -->
                <div class="u-basket d-inline-block g-z-index-3">
                  <div class="g-py-10 g-px-6">
                    <a href="#!" id="basket-bar-invoker" class="u-icon-v1 g-color-white-opacity-0_8 g-color-primary--hover g-font-size-17 g-text-underline--none--hover" aria-controls="basket-bar" aria-haspopup="true" aria-expanded="false" data-dropdown-event="hover" data-dropdown-target="#basket-bar" data-dropdown-type="css-animation" data-dropdown-duration="300" data-dropdown-hide-on-scroll="false" data-dropdown-animation-in="fadeIn" data-dropdown-animation-out="fadeOut">
                      <span class="u-badge-v1--sm g-color-white g-bg-primary g-font-size-11 g-line-height-1_4 g-rounded-50x g-pa-4" style="top: 7px !important; right: 3px !important;">4</span>
                      <i class="icon-hotel-restaurant-105 u-line-icon-pro"></i>
                    </a>
                  </div>

                  <div id="basket-bar" class="u-basket__bar u-dropdown--css-animation g-text-transform-none g-bg-white g-brd-around g-brd-gray-light-v4 u-dropdown--hidden u-dropdown--reverse-y" aria-labelledby="basket-bar-invoker" style="animation-duration: 300ms; right: 0px;">
                    <div class="g-brd-bottom g-brd-gray-light-v4 g-pa-15 g-mb-10">
                      <span class="d-block h6 text-center text-uppercase mb-0">Shopping Cart</span>
                    </div>
                    <div class="js-scrollbar g-height-200 mCustomScrollbar _mCS_1 mCS-autoHide" style="position: relative; overflow: visible;"><div id="mCSB_1" class="mCustomScrollBox mCS-minimal-dark mCSB_vertical mCSB_outside" style="max-height: none;" tabindex="0"><div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
                      <!-- Product -->
                      <div class="u-basket__product g-brd-none g-px-20">
                        <div class="row no-gutters g-pb-5">
                          <div class="col-4 pr-3">
                            <a class="u-basket__product-img" href="#!">
                              <img class="img-fluid mCS_img_loaded" src="../assets/img-temp/150x150/img1.jpg" alt="Image Description">
                            </a>
                          </div>

                          <div class="col-8">
                            <h6 class="g-font-weight-400 g-font-size-default">
                              <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#!">Black Glasses</a>
                            </h6>
                            <small class="g-color-primary g-font-size-12">1 x $22.00</small>
                          </div>
                        </div>
                        <button type="button" class="u-basket__product-remove">×</button>
                      </div>
                      <!-- End Product -->

                      <!-- Product -->
                      <div class="u-basket__product g-brd-none g-px-20">
                        <div class="row no-gutters g-pb-5">
                          <div class="col-4 pr-3">
                            <a class="u-basket__product-img" href="#!">
                              <img class="img-fluid mCS_img_loaded" src="../assets/img-temp/150x150/img2.jpg" alt="Image Description">
                            </a>
                          </div>

                          <div class="col-8">
                            <h6 class="g-font-weight-400 g-font-size-default">
                              <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#!">Gloves</a>
                            </h6>
                            <small class="g-color-primary g-font-size-12">2 x $55.00</small>
                          </div>
                        </div>
                        <button type="button" class="u-basket__product-remove">×</button>
                      </div>
                      <!-- End Product -->

                      <!-- Product -->
                      <div class="u-basket__product g-brd-none g-px-20">
                        <div class="row no-gutters g-pb-5">
                          <div class="col-4 pr-3">
                            <a class="u-basket__product-img" href="#!">
                              <img class="img-fluid mCS_img_loaded" src="../assets/img-temp/150x150/img3.jpg" alt="Image Description">
                            </a>
                          </div>

                          <div class="col-8">
                            <h6 class="g-font-weight-400 g-font-size-default">
                              <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#!">Chukka Shoes</a>
                            </h6>
                            <small class="g-color-primary g-font-size-12">1 x $199.00</small>
                          </div>
                        </div>
                        <button type="button" class="u-basket__product-remove">×</button>
                      </div>
                      <!-- End Product -->

                      <!-- Product -->
                      <div class="u-basket__product g-brd-none g-px-20">
                        <div class="row no-gutters g-pb-5">
                          <div class="col-4 pr-3">
                            <a class="u-basket__product-img" href="#!">
                              <img class="img-fluid mCS_img_loaded" src="../assets/img-temp/150x150/img4.jpg" alt="Image Description">
                            </a>
                          </div>

                          <div class="col-8">
                            <h6 class="g-font-weight-400 g-font-size-default">
                              <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#!">Desk Clock</a>
                            </h6>
                            <small class="g-color-primary g-font-size-12">1 x $12.00</small>
                          </div>
                        </div>
                        <button type="button" class="u-basket__product-remove">×</button>
                      </div>
                      <!-- End Product -->
                    </div></div><div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-minimal-dark mCSB_scrollTools_vertical" style="display: block;"><div class="mCSB_draggerContainer"><div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 50px; display: block; height: 91px; max-height: 166px; top: 0px;"><div class="mCSB_dragger_bar" style="line-height: 50px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div>

                    <div class="clearfix g-px-15">
                      <div class="row align-items-center text-center g-brd-y g-brd-gray-light-v4 g-font-size-default">
                        <div class="col g-brd-right g-brd-gray-light-v4">
                          <strong class="d-block g-py-10 text-uppercase g-color-main g-font-weight-500 g-py-10">Total</strong>
                        </div>
                        <div class="col">
                          <strong class="d-block g-py-10 g-color-main g-font-weight-500 g-py-10">$433.00</strong>
                        </div>
                      </div>
                    </div>

                    <div class="g-pa-20">
                      <div class="text-center g-mb-15">
                        <a class="text-uppercase g-color-primary g-color-main--hover g-font-weight-400 g-font-size-13 g-text-underline--none--hover" href="page-checkout-1.html">
                          View Cart
                          <i class="ml-2 icon-finance-100 u-line-icon-pro"></i>
                        </a>
                      </div>
                      <a class="btn btn-block u-btn-black g-brd-primary--hover g-bg-primary--hover g-font-size-12 text-uppercase rounded g-py-10" href="page-checkout-1.html">Proceed to Checkout</a>
                    </div>
                  </div>
                </div>
                <!-- End Basket -->

                <!-- Search -->
                <div class="d-inline-block g-valign-middle">
                  <div class="g-py-10 g-pl-15">
                    <a href="#!" class="g-color-white-opacity-0_8 g-color-primary--hover g-font-size-17 g-text-underline--none--hover" aria-haspopup="true" aria-expanded="false" data-dropdown-event="hover" aria-controls="searchform-1" data-dropdown-target="#searchform-1" data-dropdown-type="css-animation" data-dropdown-duration="300" data-dropdown-animation-in="fadeInUp" data-dropdown-animation-out="fadeOutDown">
                      <i class="g-pos-rel g-top-3 icon-education-045 u-line-icon-pro"></i>
                    </a>
                  </div>

                  <!-- Search Form -->
                  <form id="searchform-1" class="u-searchform-v1 u-dropdown--css-animation u-shadow-v20 g-brd-around g-brd-gray-light-v4 g-bg-white g-right-0 rounded g-pa-10 1g-mt-8 u-dropdown--hidden" style="animation-duration: 300ms; right: 0px;">
                    <div class="input-group">
                      <input class="form-control g-font-size-13" type="search" placeholder="Search Here...">
                      <div class="input-group-append p-0">
                        <button class="btn u-btn-primary g-font-size-12 text-uppercase g-py-13 g-px-15" type="submit">Go</button>
                      </div>
                    </div>
                  </form>
                  <!-- End Search Form -->
                </div>
                <!-- End Search -->
              </div>
            </div>
          </div>
        </div>

un exemple de ce qui est en production


<nav class="navbar navbar-default" role="navigation">
            <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                        <a class="navbar-brand" href="http://poc-mooc-2022.gipco-adns.com/"><i class="glyphicon glyphicon-home"></i></a>
            </div>
    
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
                    
                        <ul class="nav navbar-nav">
                                <li>
                                    <a href="http://poc-mooc-2022.gipco-adns.com/johnny">
                                        <span>actualite</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="http://poc-mooc-2022.gipco-adns.com/abonnement">
                                        <span>Programme</span>
                                    </a>
                                </li>
                        </ul>
                
                <ul class="nav navbar-nav navbar-right text-center">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Changer de langue <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="?locale=fr_FR">
                                        <span>Français</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="?locale=en_US">
                                            <span>English</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="?locale=es_ES">
                                            <span>Español</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        <li>
                            <div>
                                <a href="http://poc-mooc-2022.gipco-adns.com/cloud/" style="margin-left:2px; margin-right: 2px;">
                                    <button class="btn btn-primary navbar-btn">
                                        <i class="glyphicon glyphicon-cloud"></i>&nbsp;
                                        Mon dossier
                                    </button>
                                </a>
                            </div>
                        </li>
                        <li>
                            <button class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#modalContact"><i class="glyphicon glyphicon-envelope"></i>&nbsp;Contactez-nous</button>
                        </li>
                </ul>
            </div>
        </div>
</nav>

Vierge :


<div class="u-header__section g-brd-bottom g-brd-gray-light-v4 g-bg-black g-transition-0_3">
          <div class="container">
            <div class="row justify-content-between align-items-center g-mx-0--lg">

            </div>
          </div>
</div>

<div class="u-header__section g-brd-bottom g-brd-gray-light-v4 g-bg-black g-transition-0_3">
          <div class="container">
            <div class="row justify-content-between align-items-center g-mx-0--lg">

                    [#if switcher_language_navbar!true]
                        [#if !profil??]
                         
                        <!-- Langues debut -->
                        [#include "template(4831)"]
                        <!-- Langues fin -->
                        [/#if]
                    [/#if]
                   
                
            </div>
          </div>
</div>