Boostrap - zmiana navbara ze względu na szerokość menu

Czy istnieje możliwość takiego zaprogramowania navbara w boostrapie, żeby w przypadku kiedy liczba elementów menu jest większa (zajmuje większą szerokość) navbar zwijał się do pojedynczego przycisku tak jak ma to miejsce przy niższej rozdzielczości ekranu? Chodzi mi o to, żeby navbar nie zwiększał swojej wysokości tak jak ma to miejsce na poniższym obrazku, gdzie zaczyna on przesłaniać treść strony
https://user-images.githubusercontent.com/30177334/28222203-afdd9984-68c6-11e7-9a9f-83a9c68da721.png

jest kilka opcji, albo zmniejszysz fonty, albo mniejsza odległość pomiędzy obiektami w nav menu, albo zwiększysz rozdzielczość kiedy layout przechodzi na mobilny, to wszystko kwestia ustawień media queries
https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
https://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Wiem jak to zrobić bazując na szerokości ekranu, ale nie wiem ja to powiązać z szerokością elementu navbara odpowiedzialnego za menu, który jest generowany dynamicznie.

<ul class="nav navbar-nav navbar-right">
                        <li><a href="#" class="js-get-onu-list" data-olt-id="0">GPON OLT A</a></li>
                        <li><a href="#" class="js-get-onu-list" data-olt-id="1">GPON OLT B</a></li>
                        <li><a href="#" class="js-get-onu-list" data-olt-id="2">GPON OLT C</a></li>
                </ul>

Przykładowo jeżeli szerokość ekranu minus szerokość logo po lewej i szerokość wygenerowanego menu po prawej była mniejsza niż 0 to chciałbym to schować.

Gdyby ktoś potrzebował na przyszłość https://stackoverflow.com/questions/20247945/bootstrap-3-navbar-dynamic-collapse