css - nav クラスを持つ要素が折りたたまれないようにする

Question

ブートストラップ 3x を使用してページ レイアウトを構築しています。このアプリケーションの対象となる最小のデバイスであるため、最も人気がありますが、標準の(私が間違っていなければ) 解像度以上mobile firstのラップトップになります。1366x768

この場合、ブートストラップが最善の解決策であるかどうかは問題外です。なぜなら、私はテクノロジーを選ぶ人ではないからです。

そこで、マークアップから不要なクラスをすべて削除し、標準的な Web サイトにとってよりネイティブであると思われる動作に変更しました。

ナビゲーションバーを次のように変更しました：

   <div role="navigation">
      <div class="container second-navigation-container">
          <ul class="nav nav-pills nav-justified">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
      </div>
    </div>

それでも、表示サイズが十分に小さくなると（ウィンドウのサイズが変更されます）、これが得られます

これは、小さなディスプレイを備えたデバイスに望ましい動作であることを理解していますが、私が望むのは、要素を現在発生しているようにある時点まで縮小してから、側面を切り取り始めることです。このようなもの ：

私はすでにデフォルトのブートストラップ css にいくつかのカスタマイズを行っていますが、これについては、何を探すべきか、どのように変更して必要なものを取得するのかがわかりません。