CODEWITHSUNDEEP
htmlcssasp.net-corebootstrap-4asp.net-core-mvc
zzdhxu
zzdhxu

Reputation: 399

Bootstrap responsive navbar (left side and right side with form) .NET Core

I have this issue with bootstrap navbar whereby I have quite a lot of links and thus it doesn't collapse early enough, thereby resulting in a 2 row navbar. I have links on both the left and right side. How do I go about ensuring it collapses early enough? Thank you!

Edit: Even on bootstrap docs this happens so I'm quite confuse

enter image description here

enter image description here

This is my current codes:

<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 it may be due to the way .NET Core handles the data. It's a shared navbar and based on what .NET Core auto generated, this is what I have. As you can see inside the else as an example, so I may not need the full navbar tag. This is causing some issues. Either I get it left and right, but it does not close at the right size(resulting in expanded navbar), or it is all 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, just go to Views/Shared/Layout.cshtml and edit the <nav>

Upvotes: 0

Views: 1663

Answers (1)

Daniel Vafidis
Daniel Vafidis

Reputation: 357

I guess you didn't show us the full code,

change the lg to xl in 

<nav class="navbar navbar-expand-lg navbar-light bg-light">

becomes

<nav class="navbar navbar-expand-xl navbar-light bg-light">

so the navbar will expand at 1200px (xl) instead of 992 (lg)

<nav class="navbar navbar-expand-xl navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Upvotes: 1

Related Questions