Bootstrap 3, change li.active for nav

Question

So, I'm playing around with Bootstrap, I'm a total noob. At any rate, to change the nav-brand, I had to use:

.navbar-brand {
   color: #da212f!important;
   text-shadow: 2px 2px 2px #DDD;
}

That said, I had to use the !important declaration to get the text color to change. Is there a way around that (I'm just curious).

The problem is, I'm trying to change the background color and the font color for the li.active in the nav bar.

Here is the HTML

<!-- Start Navbar -->
<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 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="index.html">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="computers.html">Hardware</a></li>
        <li><a href="robots.html">Robots</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">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>

For the life of me, I can't get the background color to change and I'd like to know how to change the font color as well.

Here was the CSS Options I've tried:

Option 1

li.active {
   background-color: #da212f!important;
   color: #fff!important;
}

Option 2

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

I've tried both, with and without the !important declaration. So, if someone could help me and point me in the right direction, I'd appreciate it.

possible duplicate of https://stackoverflow.com/questions/24514717/bootstrap-navbar-active-state-not-working — Naga Sai A, Aug 10 '17 at 03:07
I'm not using or wanting to use jquery to change it. I'm wanting to use CSS. It's not a duplicate, I read that one first. He wanted to change just the link text. Either way I tried that option too. @Swellar, if possible, I'd prefer to not use !important unless required. Either way, for the li.active, !important is not working. — Amanda Zimmer, Aug 10 '17 at 03:10

Joe B. · Accepted Answer · 2017-08-10T03:17:36.407

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>

Neha Chopra · Answer 2 · 2017-08-10T03:33:20.763

1

Try this

.navbar-header > .navbar-brand {
   color: #da212f;
   text-shadow: 2px 2px 2px #DDD;
}

As there is a div with class="navbar-header" and then in that div you can find an anchor tag with calss = "navbar-brand" where you have done branding as "Mr. Robot".

For active li tag:

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

Adding a screenshot for your reference.

edited Aug 10 '17 at 03:33

answered Aug 10 '17 at 03:22

Neha Chopra

1,761
11
11

score 0 · Answer 3 · edited Aug 10 '17 at 03:21

To achieve expected result, use below CSS

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

.navbar-brand {
  color: #da212f!important;
  text-shadow: 2px 2px 2px #DDD;
}

.navbar-default .navbar-nav>.active>a:active {
  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" />

<!-- Start Navbar -->
<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 class="navbar-brand" href="#">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="index.html">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Hardware</a></li>
        <li><a href="robots.html">Robots</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">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>

Joe's answer worked perfectly. I do appreciate the time and effort you put into trying to help me. — Amanda Zimmer, Aug 10 '17 at 03:27

Bootstrap 3, change li.active for nav

3 Answers3