Navbar active flag not being set by javascript, everything looks good when set manually

user_12384273 0
Viewed 193

I am using the boilerplate _Layout page and only changed it to change the names and locations of the nav bar. I have been using basic bootstrap. I am confused on why the nav bar is not setting the active class to show which page I am currently on.

Here is the header HTML from _Layout.cshtml:

    <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">OmniPark Administration Tool</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link" asp-area="Core" asp-controller="Organizations" asp-action="Index">Organizations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="Core" asp-controller="Devices" asp-action="Index">Devices</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="C2P" asp-controller="Payments" asp-action="Index">C2P Payments</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

Here is the CSS that it came with, but the rest is the bootstrap css.

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

Then I have tried many variations of the javascript (jQuery?) to get the class to be set to active. This is the root of the problem. When I debug this I can set the active class manually on my links and they look good. I try to put breakpoints in, but it hits the top statement and skips over the rest (including the part where it sets the class to active).

<script>
    $('.navbar-nav .nav-link').click(function () {
        $('.navbar-nav .nav-link').removeClass('active');
        $(this).addClass('active');
    })
</script>
asp.net-core-mvc twitter-bootstrap asp.net-core html javascript
3 Answers

The issue here is that we need to set the active class on the nav-item li item instead of clicked nav-link link like:

$('.navbar-nav .nav-link').click(function() {
  $('.navbar-nav li.active').removeClass('active');
  $(this).closest('li').addClass('active');
})

You can also verify this from the docs:

<li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

you can see in the demos shown there that active is set on li instead of the nav-link itself

user_18238410

I basically changed to using this solution here because it works and I am able to also add dropdowns into the menu which is perfect for my future plans on this site.

I was stuck on using TagHelpers in my head and it was holding me back. This is a much better solution to my problem.

Add active class to menu item

user_123842730

You are using the wrong CSS selector. .nav-link is inside .nav-item. So use the CSS selector .navbar-nav .nav-item .nav-link in your JavaScript code.

user_89269030
Related