bootstrap change navbar .active background color

javascript html css twitter-bootstrap navbar

21,715

Solution 1

To achieve what you want, you have to do two things, make sure you address the right item with JavaScript and override the default styling that's been set by the Bootstrap CSS.

JavaScript (jQuery)

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

You were addressing the #nav, but in your HTML, there was only a class with nav, no ID. Also, don't add the class to the href attribute.

This JS code will first remove .active from all selectors (.nav li) before setting it again on the item that's clicked.

Styling added

.navbar-default .navbar-nav>.active> a, 
.navbar-default .navbar-nav>.active> a:focus, 
.navbar-default .navbar-nav>.active> a:hover {
  background: red; /* Anything you want */
}

See this JSFiddle for a demo.

Solution 2

Override these styles...

<style>
   .navbar-default .navbar-nav>li>a:focus { color: #DD0000; }
   .navbar-default .navbar-brand:focus { color: #DD0000; }
</style>

I took your file above and put this style tag at the bottom of the <head>. Seems to do what you're asking. I usually do this in a separate CSS for the site that is included last in your CSS links.

21,715

Author by

Zeliax

Cand. Polyt. Graduated MSc Candidate in Digital Media Engineering at the Technical University of Denmark. Bachelor student at the Technical University of Denmark at the study called IT & Communication Technology.

Updated on July 09, 2022

Comments

Zeliax almost 2 years

I have a navbar in which I can't really see the .active color as I am using a 3rd party theme that I really like, but however I have one problem with the theme. I can't properly see which of my navbar items that is currently active. Therefore I want to add a background color to the .active element.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <meta charset="utf-8">
  <!-- MOBILE FIRST -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- BOOTSTRAP -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <!-- THEMES -->
  <!-- <link href="css/theme_black.min.css" rel="stylesheet"> -->
  <!-- <link href="css/theme_white.min.css" rel="stylesheet"> -->

  <!-- HOMEMADE - these files are local --> 
  <!-- <script src="js/functions.js"></script> -->
  <!-- <link href="css/custom_style.css" rel="stylesheet"> --> 
</head>
<body>
<header id="header" class="header clearfix no-padding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Test</a>
      </div>
      <div class="collapse navbar-collapse no-padding">
        <ul class="nav navbar-nav pull-right" id="navigator">
          <li id="home"><a class="border" href="#">Home</a></li>
          <li id="about"><a class="border" href="#">About</a></li>
          <li id="cv"><a class="border" href="#">CV</a></li>
          <li id="contact"><a class="border" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
</body>

I am using the following code in my javascript to change the .active item

functions.js

$('#nav li a').click(function() {
  $('#nav li').removeClass();
  $($(this).attr('href')).addClass('active');
});

I do however want to change the background of the active item, and I have tried a couple of different solutions in my css, but none of them work as intended.

custom_style.css

.no-margin {
  margin: 0;
}

.no-padding {
  padding: 0;
}

//some sort of .active {
//  background-color: blue;
//}

EDIT:

Now with a fiddle: https://jsfiddle.net/819qbftg/2/

Zeliax about 8 years

Superb answer. You also corrected my error with the identifier ("#") in the javascript. Cheers!
singhswat almost 5 years

@Roy where should we add this styling... in bootstrap.css or bootstrap-themes...?