Логотип и пункты меню в разных строках в меню yamm

Question

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

<header> 
    <nav class="navbar yamm navbar-fixed-top headerBg headerText" id="heading"> 
     <style>@media (min-width: 767px) { .dropdown:hover .dropdown-menu { display: block; } }</style> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"> 
        <span class="icon-bar" style="height:3px;"></span> 
        <span class="icon-bar" style="height:3px"></span> 
        <span class="icon-bar" style="height:3px"></span> 
       </button> 
       <a href="#" class="navbar-brand"> 
        <div style="background: transparent url('img/logo.png') no-repeat scroll center center;background-size: contain;width:100px;height:25px;"></div> 
       </a> 
      </div> 
      <div id="navbar-collapse-1" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <?php for($i = 1; $i < 12; $i++):?> 
        <li class="dropdown"> 
         <a href="#" class="headerText">Item <?php echo $i;?></a> 
        </li> 
        <?php endfor;?> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

Спасибо

Answer 1

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

@media only screen and (min-width: MORE_EARLIER_PIXELS) { 
    .dropdown-menu, .navbar-collapse.in { 
     display: block; 
    } 

    .navbar-collapse{ 
     display:none; 
    } 
}