Бутстрап навигация рушится и дополнительная кнопка

Question

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

На данный момент это выглядит так: корзина для покупок должна быть слева или справа от кнопки свернуть, мне все равно, какая сторона.

Как это (и должно быть), когда полная ширина используется

Это мой заголовок HTML

 <div id="wrapper" class="clearfix"> 
      <nav class="navbar navbar-default navbar-fixed-top"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <h1><a class="navbar-brand" href="{{@BASE}}/index">Audio Delight</a></h1> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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> 
        </div> 
        <div id="navbar" aria-expanded="true"> 
         <ul class="nav navbar-nav navbar-collapse collapse"> 
          <li <check if="{{ @title=='Home' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/index">Home</a> 
          </li> 
          <li <check if="{{ @title=='DJ' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/dj">DJ</a> 
          </li> 
          <li <check if="{{ @title=='Ampli' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/ampli">Ampli</a> 
          </li> 
          <li <check if="{{ @title=='Light' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/light">Light</a> 
          </li> 
          <li <check if="{{ @title=='PA' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/pa">PA</a> 
          </li> 
          <li <check if="{{ @title=='Hardware' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/hardware">Hardware</a> 
          </li> 
          <li <check if="{{ @title=='AV' }}"> 
          class="active"</check>> 
           <a href="{{@BASE}}/av">AV</a> 
          </li> 
         </ul> 
         <div id="cartNav"> 
          <ul id="cart" class="nav navbar-nav"> 
           <li id="cart" <check if="{{ @title=='Winkelwagen' }}"> 
           class="active"</check>> 
            <a href="{{@BASE}}/shoppingCart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
           </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </nav> 
     </div> 

И мой дополнительный CSS:

/*Header*/ 
div#cartNav { 
    float: right; 
    width: 56px; 
} 

ul#cart { 
    float: right; 
} 

li#cart a { 
    padding-top: 9px; 
} 

li#cart { 
    display: block; 
    font-size: 26px; 
} 

Answer 1

Fiddle:

https://jsfiddle.net/mwatz122/udo21wo9/2/

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

     </button> 
     <div class="navbar-header"> <a class="navbar-brand" href='#'>Brand</a> 

     </div> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href='#'>Shopping Cart</a> 

      </li> 
     </ul> 
     <div class="navbar-collapse collapse navbar-left"> 
      <ul class="nav navbar-nav"> 
       <li><a href='#'>Home</a> 

       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS:

.navbar-right { 
    float: right; 
} 
.nav.navbar-nav.navbar-right ul { 
    float: right; 
} 
.nav.navbar-nav.navbar-right li { 
    float: left; 
} 
.navbar-toggle { 
    float: left; 
} 
@media all and (max-width:767px) { 
    .navbar-header { 
     float: left; 
    } 
    .navbar-collapse { 
     clear: both; 
     float: none; 
    } 
} 

Answer 2

Агрегируйте меню и значок магазина в div и примените положение поплавка ребенка, например:

<div class="thetwoitems"> 
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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> 
    <div id="cartNav"> 
          <ul id="cart" class="nav navbar-nav"> 
           <li id="cart" <check if="{{ @title=='Winkelwagen' }}"> 
           class="active"</check>> 
            <a href="{{@BASE}}/shoppingCart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
           </li> 
          </ul> 
         </div> 
</div> 

и применить это к вашей корзине:

#cartNav { 
float: right; 
}