Загрузочная панель навигации сворачивает меню, когда элементы превышают лимит

#javascript #html #jquery #css #twitter-bootstrap-3

Вопрос:

У меня есть загрузочная панель, которая включает в себя ASP.NET меню, которое динамически загружается из БД.

Меню работает отлично, но когда количество пунктов меню увеличивается, оно начинает показывать перенос в новую строку.

Как я могу свернуть это меню, если элементы превышают размер навигационной панели, не изменяя размер экрана ?? Вот как выглядит меню ..

 My Code for navbar

<nav class="navbar navbar-default">

                        <div class="container-fluid">

                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                
                                <a class="navbar-brand linkWhite" href="#">Brand</a>
                            </div>


                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
                                    IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu" MaximumDynamicDisplayLevels="20">
                                </asp:Menu>
                            </div>

                        </div>

                    </nav>