Меню Bootstrap 3 Navbar Свернуть в левой части слева и справа на панели навигации

У меня есть навигационная панель Bootstrap 3 с левыми навигационными элементами и правыми навигационными элементами (как показано ниже).

Когда рухнет, я хочу, чтобы и навигационный переключатель (AKA "меню гамбургера" ), и его элементы были выровнены влево.

Мой код:

<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

В CSS, чтобы включить навигационную панель слева:

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
        margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

Я добавил стиль "pull-right", чтобы элементы были выровнены без успеха.

"navbar-right" работает плохо. На самом деле, с ним, у меня будут и правые предметы в одной строке. Используя "pull-right", они работают как одиночные строки, но все равно остаются справа.

Это оставляет меня:

Меню гамбургера слева (по желанию),
Навигационные левые элементы слева (по желанию),
Правые позиции навигатора по-прежнему справа (я хочу, чтобы это было исправлено!).

Конечный результат:

Фрагмент кода здесь.

Ответ 1

Я сделал несколько настроек вашего CSS и разметки, которые вы можете просмотреть здесь.

Одна вещь, которую я хотел бы указать, заключается в том, что pull-right и другие классы pull и push предназначены для переупорядочения столбцов сетки.

Ответ 2

Вы можете использовать правило !important, чтобы переопределить поведение по умолчанию pull-right.

@media (max-width:767px) {
 .nav.navbar-nav.pull-right {
   float: left !important;
 }
}

Вывод в устройствах <765px

Bootply