Выпадающее меню гамбургера на правой стороне

Question

Я пытаюсь расположить меню гамбургера справа, когда нажимаю на него, но мне не удается настроить CSS для этого.

У меня есть код HTML:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <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 class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header">
        <p class="navbar-text navbar-right">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>

Объявление CSS:

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Как настроить CSS, чтобы меню гамбургера находилось справа при нажатии на него? Заполнение полей должно соответствовать размеру слов в нем. Вот так:

Ничего страшного, если перезаписать пространство под ним.

Мне нужно решение который использует только этот код CSS. Подробнее здесь .

Спасибо.

Answer 1

Измените селектор collapse.in на

.collapse.in{
    display:block !important;
    position:absolute;
    float:right;
    right: 0;
}