My navbar is displaying too many items and overflows. How can I collapse it at a higher screen width?

Question

Below is my code. I tried setting max-height to its normal height, and I've searched a lot but found nothing that has worked. It is in an ASP.NET master page if that makes a difference.

div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/Pages/TeamProfile">ManageU</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/Pages/TeamProfile">Team Profile</a></li>
                    <li><a runat="server" href="~/Pages/PlayerSchedule">My Schedule</a></li>
                    <li><a runat="server" href="~/Pages/Roster">Roster</a></li>
                    <li><a runat="server" href="~/Pages/TestCal">Calendar</a></li>
                    <li><a runat="server" href="~/Pages/Tasks">Tasks</a></li>
                    <li><a runat="server" href="~/Pages/FindTime">Meetings</a></li>
                    <li><a runat="server" href="~/Pages/Contact">Contact</a></li>
                    <li><a runat="server" href="~/Pages/InvitePlayers">Invite</a></li>
                    <li><a runat="server" href="~/Pages/MyInfo">My Info</a></li>
                    <li><a runat="server" href="~/Pages/ChangePassword">Change Password</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Pages/Landing" onclick="logOut_Click">Log Out</a></li>
                        </ul>
                    </AnonymousTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>

I'm using the default bootstrap css. I haven't made any modifications except for color and font, and trying to add a max-height (which didn't work). — Andrew, May 01 '17 at 02:21
You can try organising your nav bar items. Such as Contact, My Info and Password can be in dropdown say Profile. Tasks, Calendar, Roster, Schedule can be grouped as Tasks DropDown. It will not only NOT clutter your navbar, but also be neat and easier for user to find what is required. — athar13, May 01 '17 at 03:09

score 0 · Answer 1 · answered May 01 '17 at 03:15

There will be a media query in Bootstrap that hides the full nav until a certain breakpoint. You will want to increase the min-width of that breakpoint for the nav to stay collapsed until the items fit.

In the new version it looks like this.

@media (min-width: 992px){}
  .navbar-toggleable-md .navbar-collapse {
      display: flex!important;
      width: 100%;
  }
}

.collapse {
    display: none;
}

My navbar is displaying too many items and overflows. How can I collapse it at a higher screen width?

1 Answers1