Bootstrap navigation bar doesn't collapse in appropiate way

Question

HI I'm using bootstrap in my web app, but i have a problem with the navigation bar, my code is here:

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="/" title="Backoffice Wenco"><img style="max-width:50px; margin-top: -7px;" src="http://www.mekano.com/mkn2009/pics/logos_manufacturas/logo_wenco.gif"></a>
            <span class="navbar-brand">Gestión de Horas</span>
        </div>
        <div class="navbar-collapse collapse" id="mainNavBar">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Inicio", "Index", "Home")</li>
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "Project"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "Project");
                    <li>@Html.ActionLink(action.Caption, "Index", "Project")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "Project", "EditUsers"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "Project" && a.Accion == "EditUsers");
                    <li>@Html.ActionLink(action.Caption, "EditUsers", "Project")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "Report"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "Report");
                    <li>@Html.ActionLink(action.Caption, "UserProjectHours", "Report")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "WorkingDay", "Index"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "WorkingDay" && a.Accion == "Index");
                    <li>@Html.ActionLink(action.Caption, "Index", "WorkingDay")</li>
                }
                @if (userAccessService.IsInAction(user.SamAccountName, appId, "WorkingDay", "IndexAdmin"))
                {
                    var action = user.ApplicationRoles.First(i => i.Application.Alias.Equals(appId)).Actions.FirstOrDefault(a => a.Controller == "WorkingDay" && a.Accion == "IndexAdmin");
                    <li>@Html.ActionLink(action.Caption, "Index", "WorkingDay")</li>
                }
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><p class="navbar-text">@user.GivenName</p></li>
                <li>@Html.ActionLink("Cerrar Sesión", "LogOff", "Account")</li>
            </ul>
        </div>
    </div>
</nav>

I have a default navigation bar and also a right navigation bar, but the collapse efect is not working very well, here the captures:

enter image description here

Does anyone know what should i do to avoid the mistake?

Update I would like to explain more about my problem. I would like to have all the time in one line my navigation bar, if the elements can't be in the same line, it should show the menu (like the last image)

I think that is how it is supposed to be at a certain viewport, what was the screen resolution on the 2nd image? — lozadaOmr, Apr 16 '14 at 15:31
This isn't a mistake, it doesn't collapse when the navigation bars wrap, you see the mobile navigation bar below a certain screen width — James King, Apr 16 '14 at 15:43
Sorry if I didn't explain my problem in a good way. I've updated my question. — shinjidev, Apr 16 '14 at 16:10

score 0 · Answer 1 · answered Apr 16 '14 at 15:47

The problem is that you have lot of links in your navbar ... solution for this would be change the "grid-float-breakpoint" ... by default it breaks for small screen devices ... you need to change it to medium screen devices ... if ur using sass or less you can just change the variable like this

@grid-float-breakpoint: @screen-md-min

check the customize page of bootstrap and look for "grid-float-breakpoint"

score 0 · Answer 2 · answered Apr 16 '14 at 20:02

First off dealing with the @grid-float-breakpoint, etc. is a HUGE Pain in the ...

This may work for you it's a jQuery resize function where you can set the breakpoint to collapse the menu. Edit the widow.width as applicable. Put the inside script tags at the bottom of your page. HTH!

$(window).resize(function() {
if ($(window).width() < 768) {
    $('.navbar-collapse a').click(function(e) {

        $('.navbar-collapse').collapse('toggle');
    });
    }
 });

I tried it in my _layout.cshtml but doesn't work. Even I tried it in console, but nothing happens. — shinjidev, Apr 22 '14 at 13:42

Bootstrap navigation bar doesn't collapse in appropiate way

2 Answers2

Linked