Material Design: Адаптивная панель навигации Bootstrap 3

Обновите вместе с кодом, как показано ниже: Демонстрация

.navbar-toggle {
    float: left;      
}        
.navbar-brand {
    display: block;
    float: none;        
    text-align: center;
}    
.navbar-nav > li > a {       
    padding-bottom: 3px;
    padding-top: 3px;
}

Я написал свою собственную минимальную таблицу стилей навигационной панели начальной загрузки, которая строится на основе переменных Bootstrap. /* материальная панель навигации */

.material-navbar {

  /*

  Hides normally visible elements

  important notes:
  @grid-float-breakpoint - point at which navbar becomes uncollapsed
  @grid-float-breakpoint-max - point at which the navbar begins collapsing

  */

  > * {
    width: 100%;
    flex: 1;
    list-style-type: none;
  }

  > .left {
    text-align: left;
  }

  > .center {
    text-align: center;
  }

  > .right {
    text-align: right;
  }

  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  margin: 0;

  /* collapsed */
  @media (max-width: @screen-sm-max) {
    display: none;
  }

  /* not collapsed */
  @media (min-width: (@screen-sm-max - 1px)) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

}

.material-navbar-collapsed {

  /*

  Shows normally visible elements

  important notes:
  @grid-float-breakpoint - point at which navbar becomes uncollapsed
  @grid-float-breakpoint-max - point at which the navbar begins collapsing

  */

  > * {
    width: 100%;
    flex: 1;
    list-style-type: none;
  }

  > .left {
    text-align: left;
  }

  > .center {
    text-align: center;
  }

  > .right {
    text-align: right;
  }

  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  margin: 0;

  /* collapsed */
  @media (max-width: @screen-sm-max) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* not collapsed */
  @media (min-width: (@screen-sm-max - 1px)) {
    display: none;
  }

}

Пример: https://jsfiddle.net/eo2gsxcm/

Обновление 1: https://jsfiddle.net/eo2gsxcm/1/

Обновление 2. Установите точки останова окна просмотра на screen-sm-max https://jsfiddle.net/eo2gsxcm/2/

Что я изменил:

• включены расширенные кнопки переключения левой и правой панели навигации внутри navbar-header div и избавлены от контейнера div в left-navbar-menu и right-navbar-menu элементах неупорядоченного списка.
• применил float:left в гамбургер-меню
• выровненный текст элемента списка левой панели навигации и правой панели навигации слева и справа соответственно.
• включена как третья фиктивная кнопка поиска.

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  color: #FFFFFF;
  margin: auto;
}
.navbar {
  background-color: #3F50B5;
  color: #FFFFFF;
}
a {
  color: #FFFFFF !important;
}
a:hover {
  color: #000000 !important;
}
.custom-navbar .hamburger-on-left {
  float: left;
}
.navbar-left li {
  text-align: left;
}
.navbar-right li {
  text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-fixed-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <!-- expanded behavior -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <!-- expanded left navbar-->
      <div class="navbar-left">
        <button type="button" class="navbar-toggle hamburger-on-left" data-toggle="collapse" data-target="#left-navbar-menu">
          <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="false"></span>
        </button>
      </div>

      <!-- expanded right navbar -->
      <div class="navbar-right">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#right-navbar-menu">
          <span class="glyphicon glyphicon-option-vertical" aria-hidden="false"></span>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
          <span class="glyphicon glyphicon-search" aria-hidden="false"></span>
        </button>
      </div>
    </div>



    <!-- collapsed behavior -->
    <ul id="left-navbar-menu" class="nav navbar-nav navbar-left navbar-collapse collapse">
      <li><a href="#">Left</a>
      </li>
      <li><a href="#about">Left</a>
      </li>
    </ul>

    <ul id="right-navbar-menu" class="nav navbar-nav navbar-right navbar-collapse collapse">
      <li><a href="#about">Right</a>
      </li>
      <li><a href="#contact">Right</a>
      </li>
    </ul>

  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>