Bootstrap 3 Navbar Active Li Not Changing Background-Color

Bootstrap 3 navbar active li not changing background-color

You need to add CSS to .active instead of .active a.

Fiddle: http://jsfiddle.net/T5X6h/2/

Something like this:

.navbar-default .navbar-nav > .active{
    color: #000;
    background: #d65c14;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #000;
    background: #d65c14;
}

Bootstrap navbar active background color when scrolling

Please correct code by following :

1) Please remove 'text-light' class from tag. It should be

<a class="nav-link" href="#about">About</a>

2) Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).

<body data-spy="scroll" data-target=".navbar" data-offset="50">

3) Please update CSS selector :

.navbar-nav .active {
    background-color: violet;
    border-radius: 5px;
}

body {
    position: relative;
}
.navbar {
    padding: 0.8rem;
    background-color: #1C2331;
}
.navbar-nav li {
    padding-right: 25px;
}
.nav-link {
    font-size: 1.1em !important;
    font-weight: bold;
}
.navbar-nav .active {
    background-color: violet;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<body data-spy="scroll" data-target=".navbar" data-offset="0">
<nav id="main-navbar" class="navbar navbar-expand-md navbar-dark sticky-top">
  <div class="container-fluid">
    <!--100% of the screen-->
    <a id="logo" href="#top"> <img src="Images/logo.svg" alt="Website logo"> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>
      </ul>
    </div>
  </div>
</nav>
<div id="about" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>

Failed to change the currently active bootstrap navbar list item text color on click?

I finally found the solution and here it is:

By changing the jQuery code from this:

$(document).ready(function () {

  $('#nav li a').click(function(e){

        e.preventDefault(); // This does not allow to load the relative page to the nav item.

        $('#nav li').removeClass('active');
        $(this).addClass('active');
  });
});

to this:

$(document).ready(function () {

  var pathname = window.location.pathname;
  if (pathname == '/')
      $('.navbar-brand').css("color", "rgb(32, 42, 62)", "background-color", "#D3212D");
  else
        $('#nav > li > a[href="' + pathname + '"]').parent().addClass('active');

});

I was able to fix my problem :)

Bootstrap 3, change li.active for nav

For the logo brand you can add an id to the navbar-brand element and that will give it higher css specificity.

#myBrand {
  color: #da212f;
  text-shadow: 2px 2px 2px #DDD;
}

For the active link you use the following

.nav.navbar-nav > li.active a{
  background: none;     
  background-color: #da212f;
  color: #fff;
}

#myBrand {  color: #da212f;  text-shadow: 2px 2px 2px #DDD;}
.nav.navbar-nav > li.active a{  background: none;       background-color: #da212f;  color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-default navbar-fixed-top">  <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a id="myBrand" class="navbar-brand" href="index.html">Mr. Robot</a>    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>        <li><a href="#">Hardware</a></li>        <li><a href="#">Robots</a></li>        <li><a href="#">About</a></li>        <li><a href="#">Contact</a></li>      </ul>      <form class="navbar-form navbar-right">        <div class="form-group">          <input type="text" class="form-control" placeholder="Search">        </div>        <button type="submit" class="btn btn-default">Submit</button>      </form>    </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --></nav>

Change the nav-item background color not working

Target the active nav-item like this:

.nav-item.active > a{

}

Then you can add css styling into it.
Before you weren't selecting the element properly.

What you desired:

.nav-item.active > a {
  color: aqua;
}

.nav-item > a:hover {
  background-color: chartreuse;    
}

See codepen: https://codepen.io/koder613/pen/ZEWNEgw?editors=1100

How to Change Background Color of Bootstrap Navbar

.navbar-light {
    background-color: yellow !important;
    border: none !important;
    border-width:0!important;
}

Bootstrap 3 Navbar Active Li Not Changing Background-Color