Bootstrap 4 Navigation Active Link Color

How to change active link color in bootstrap css?

Finally with experiments I found how to capture it.

#top-menu .current a
{
    color: orange !important;
}

Thank you everyone for your time and help.
Much appreciated!

Bootstrap 4 navbar active backgroup color

Bootstrap 4 doesn't have css for active class.

So you have to add css by your self

Simply add css like

.active {
   background:#4FA9DC; color:#000;
}

Change link color (when active) with jQuery

I found a solution that is working exactly like I wanted to so I wanted to share it ! :)

jQuery(function($) {
         var path = window.location.href;
         $('li a').each(function() {
          if (this.href === path) {
           $(this).addClass('active');
          }
         });
        });

Bootstrap 4 navbar active class

There are multiple issues...

1. The selector $('.nav li') does nothing because you have no .nav
   class used anywhere in the markup. It should be $('.navbar-nav .nav-link').
2. You have style="color:white" on the links which will override any changes you make with the active class.
3. You have no CSS for the active class, and by default Bootstrap active class on navbar-dark is going to be white. What color are you trying to set?
4. Set active in the nav-link instead of the li,

---

.navbar-dark .nav-item > .nav-link.active  {
    color:white;
}

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

Demo: https://www.codeply.com/go/I3EjDb74My

bootstrap4 navbar set active link

Bootstrap documentation says:

Active states—with .active—to indicate the current page can be applied
directly to .nav-links or their immediate parent .nav-items.

So you need to place active class on nav-item to make it work. Like this:

<nav class="navbar navbar-expand-sm"> <button class="navbar-toggler" type="button" data-target="#navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item active"> <a href="{% url 'terminal-management'  %}" class="nav-link"> Terminals </a> </li>
            <li class="nav-item"> <a href="{% url 'location-management'  %}" class="nav-link active"> Area & Rooms </a> </li>
        </ul>
    </div>
</nav>

Probably you won't need to define a custom style to it, but you can using this css selector:

.nav-link.active {
  color: red;
}

---

Related Topics