CSS - 結果が表示されたアルゴリアドロップダウンメニューをブートストラップナビバーのドロップダウンメニューに移動

Question

検索フォームを持つnavbarがあり、Algoliaのオートコンプリートソリューションの結果が表示されます。結果は私がドロップダウンメニューの上に行くためにそれらをしたいと思いナビゲーションバーのドロップダウンメニュー

の内側にあることを、私は問題を抱えている小さな画面で

<nav class="navbar" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <div id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span></span> 
      <span></span> 
      <span></span> 
     </div> 
     <a href="{{ url('/') }}"> 
      <img class="logo logo-small" src="{{ asset('/img/logo-small.png') }}" alt="logo"> 
      <img class="logo logo-big" src="{{ asset('/img/m2.png') }}" alt="logo"> 
     </a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <form action="/search" method="get" class="navbar-form navbar-search-form active" role="search"> 
      <div class="form-group"> 
      <div class="input-group"> 
       <span class="input-group-addon"> 
       <button type="submit"><i class="ion-ios-search-strong"></i></button> 
       </span> 
       <input type="text" id="search-input" name="q" class="form-control" placeholder="Search for videos or players..." value="{{ Request::get('q') }}" autofocus> 
      </div> 
      </div> 
     </form> 

     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="{{ url('/login') }}" class="btn btn-primary">Sign in</a> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
    </nav> 

：これはナビゲーションバーです。私はalgoliaドロップダウンの様々な要素のためのZインデックスの設定を試してみました：

.algolia-autocomplete { 
    z-index: 999999 !important; 
} 

をしかし、それは要素がそのようにオートコンプリート上で作成されているので、正確に、私は、Zインデックスを変更する必要があります場所がわからない、うまくいきませんでした私は何かをタイプする前に構造を見ることができません。どうすれば修正できますか？

Answer 1

問題は、ブートストラップクラスにいた：

.navbar-collapse.in { 
    overflow-y: auto; 
} 

私はoverflow-y: visible;にそれを変更しなければならなかったし、それが働きました。