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