Bootstrap navbar collapse to late

Question

My main menu will wrap to a new row instead of collapsing (it will collapse if I make the window even smaller, but i want to get rid of this graphic bug.)

This is my code in _Layout.cshtml

<div class="navbar-wrapper">
    <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="#nav-collapse">
                    <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" style="padding-right: 30px; padding-top: 5px;" href="/">
                    <img src="@Url.Content("~/content/images/static/logo_web_white.png")" class="hidden-xs" style="height: 70px;" />
                    <img src="@Url.Content("~/content/images/static/logo_mini.png")" class="visible-xs" style="height: 70px;" />
                </a>

            </div>
            <div class="navbar-collapse collapse" id="nav-collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("New Paste", "Create", "Paste")</li>
                    <li>@Html.ActionLink("Archive", "archive", new { controller = "paste", page = 1 })</li>
                    <li>@Html.ActionLink("Trending", "trending", "paste")</li>
                    @if (Request.IsAuthenticated)
                    {
                        <li>@Html.ActionLink("My pastes", "archive", new { controller = "user", username = User.Identity.Name, page = 1 })</li>
                    }
                    <li>
                        <a href=" #" class="dropdown-toggle" data-toggle="dropdown">
                            About <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("FAQ", "faq", "home")</li>
                            <li>@Html.ActionLink("API", "api", "home")</li>
                            <li>@Html.ActionLink("PRIVACY POLICY", "privacy", "home")</li>
                            <li>@Html.ActionLink("DMCA", "dmca", "home")</li>
                            <li>@Html.ActionLink("CONTACT US", "contact", "home")</li>
                            <li>@Html.ActionLink("ABOUT", "about", "home")</li>
                        </ul>
                    </li>

                </ul>
                @Html.Partial("_LoginPartial")
            </div><!--/.navbar-collapse -->
        </div>
    </div>
</div>

And my _LoginPartial

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right", style = "display: inline-block;" }))
    {
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href=" #" class="dropdown-toggle" data-toggle="dropdown">
                Hello @User.Identity.GetUserName() <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>@Html.ActionLink("Upload Image", "uploadimage", "user")</li>
            </ul>
        </li>
        <li>

        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

I have tried to move the @Html.Partial("_LoginPartial") but nothing helps. This is almost ouy of the box from the MVC5 template in Visual Studio.

Answer 1

@AndyM, your comment lead me in the right direction.

I recreated the Bootstrap.css file through http://getbootstrap.com/customize and increased the @screen-sm attribute to 1000px instead of 768px. This resolved the collapse problem.