bootstrap navbar два «меню гамбургера» слева и справа

Question

Я действительно сделал свое исследование, но ничего не нашел, я видел предметы слева и справа, а затем рухнул в «меню гамбургеров» справа или слева. Но я не видел с каждой стороны двух рухнувших меню, что я хотел бы сделать.

Это то, что я до сих пор:

И рухнул:

Так, firt всего я хотел бы иметь реальное "меню гамбургер" слева, когда не рухнул, я попытался добавить его, но у меня была только одна белая линия.

Во-вторых, я хотел бы иметь значок человека с текстом «о нас», но когда он рухнул, я хочу, чтобы появился только значок человека.

Таким образом, окончательный результат будет выглядеть так:

Меню hamrbuger будет интерактивным, но не выпадет из любого меню вниз.

Возможно ли это сделать? Я новичок в бутстрапе, и, как я уже сказал, прежде чем я сделал свое исследование, но не мог ничего понять, что-то вроде этого.

ps: меню гамбургера слева не имеет решающего значения, я могу жить с глификоном.

это мой код:

HTML:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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="#"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> calcular.cl</a> 
    </div> 

    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> Menú</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Acerca de nosotros</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

и мой CSS:

.navbar { 
    margin-bottom:0px;} /* esto quita el margen del navbar*/ 
.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

    .navbar-default { 
    background-color: #e67e22; 
    border-color: #d35400; } 
    .navbar-default .navbar-brand { 
    color: #ecf0f1; } 
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #ffe6d1; } 
    .navbar-default .navbar-nav > li > a { 
    color: #ecf0f1; } 
    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus { 
    color: #ffe6d1; } 
    .navbar-default .navbar-nav .active > a, 
    .navbar-default .navbar-nav .active > a:hover, 
    .navbar-default .navbar-nav .active > a:focus { 
    color: #ffe6d1; 
    background-color: #d35400; } 
    .navbar-default .navbar-nav .open > a, .navbar-default .navbar-nav .open > a:hover, 
    .navbar-default .navbar-nav .open > a:focus { 
    color: #ffe6d1; 
    background-color: #d35400; } 
    .navbar-default .navbar-nav .open > a .caret, 
    .navbar-default .navbar-nav .open > a:hover .caret, 
    .navbar-default .navbar-nav .open > a:focus .caret { 
    border-top-color: #ffe6d1; 
    border-bottom-color: #ffe6d1; } 
    .navbar-default .navbar-nav > .dropdown > a .caret { 
    border-top-color: #ecf0f1; 
    border-bottom-color: #ecf0f1; } 
    .navbar-default .navbar-nav > .dropdown > a:hover .caret, 
    .navbar-default .navbar-nav > .dropdown > a:focus .caret { 
    border-top-color: #ffe6d1; 
    border-bottom-color: #ffe6d1; } 
    .navbar-default .navbar-toggle { 
    border-color: #d35400; } 
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #d35400; } 
    .navbar-default .navbar-toggle .icon-bar { 
    background-color: #ecf0f1; } 

    @media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #ecf0f1; } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffe6d1; 
    background-color: #d35400; } 
    } 

Надеюсь, вы не думаете, им ленивый, но это мой второй день пытается сделать это.

Answer 1

Это не полное решение, но только идея для двух отдельных разборных меню:

1. Поместите обе тумблер кнопки в navbar-header блоке.
2. Оберните левую сторону навигационной панели на отдельный collapse navbar-collapse блок.
3. Будьте осторожны с недвижимостью float.

http://codepen.io/glebkema/pen/kXAYGz

.navbar-toggle.pull-left { 
 
    margin-left: 15px; 
 
} 
 
@media (min-width: 768px) { 
 
    .pull-sm-left { 
 
    float: left !important; 
 
}

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

 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#collapseLeft" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseRight" aria-expanded="false"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse pull-sm-left" id="collapseLeft"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Left 1 <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Left 2</a></li> 
 
     <li><a href="#">Left 3</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="collapseRight"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Right 1</a></li> 
 
     <li><a href="#">Right 2</a></li> 
 
     <li><a href="#">Right 3</a></li> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

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