Hey there! I've incorporated Bootstrap into my web application, but I'm encountering an issue with the navigation bar. Check out my code below:
<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'm encountering an issue where the collapse effect in the default navigation bar and the right navigation bar isn't functioning as expected. Here are some screenshots:
Any ideas on how I can resolve this issue and ensure that my navigation bar remains on one line and properly collapses when needed?
Update: I want to provide additional details about the problem. I want to ensure that my navigation bar stays in one line at all times. If the elements can't fit on the same line, it should display the menu (similar to the last image).