I am facing an issue with the bootstrap navbar where I have a lot of links causing it to not collapse early enough, resulting in a 2-row navbar. The links are on both left and right sides. How can I ensure that it collapses earlier? Thank you!
Edit: This issue even occurs on the bootstrap documentation so I am quite confused.
https://i.sstatic.net/h1Ofh.png
https://i.sstatic.net/NJlJL.png
Here is my current code:
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
<li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
<li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
<li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
<li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
<li class="nav-item"><a asp-area="" asp-controller="" asp-action="" class="nav-link">XXX</a></li>
<form asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage" class="nav-link">Profile</a>
</li>
<li class="nav-item">
<button type="submit" class="btn btn-link navbar-btn navbar-link">Logout</button>
</li>
</ul>
</form>
</ul>
Update 2: I suspect the issue may be related to how .NET Core handles data. It's a shared navbar and based on what .NET Core generates automatically, this is what I have. Inside the else block, I may not need the full navbar tag which is causing some issues. Either the content is aligned left and right but doesn't close at the right size (resulting in an expanded navbar), or everything is on the left but the navbar closes on time.
@if (SignInManager.IsSignedIn(User) && showAll == true)
{
//View codes here
}
else
{
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link">Home</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a></li>
<li class="nav-item"><a asp-area="" asp-controller="Home" asp-action="Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a asp-area="Identity" asp-page="/Account/Login" class="nav-link">Login</a></li>
</ul>
}
Update:
For .NET Core MVC users, simply navigate to Views/Shared/Layout.cshtml and modify the <nav>