CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
Atul Tirkey
Atul Tirkey

Reputation: 23

not able to overwrite bootstrap .active class in the navbar

I am not able to change the background color of the active link, although I have overwritten the .active class in my own css file. I also tried with a different class (overwrite) but still I am not able to overwrite the .active class. Here is the Ruby code

%ul.nav.nav-list
%li{:class => "#{'active overwrite' if params[:controller] == 'dashboard'}"}
%a{:href => home_path}
    .container.nav-style
        %p.center
            %i.icon-dashboard.icon-3x
            %br
            %strong DASHBOARD

Here is the Css

 .overwrite{
         background-color:red;  
    }

Upvotes: 2

Views: 6412

Answers (2)

Samda
Samda

Reputation: 1489

Please see the example below by Run Snippet with Full page.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </div>

  <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.2/js/bootstrap.min.js">
  </script>
  <script>
       //Click on any li in ul with class 'navbar-nav'
      $('ul.navbar-nav li').click(function(e) {
        var $this = $(this); // declare variable for current li that we click
        $('ul.navbar-nav').find('li.active').last().removeClass('active') //find all li that class class active and remove
        $this.addClass('active'); //add 'active' class to current li.
      });
    </script>
</body>

</html>

Upvotes: 0

rails_id
rails_id

Reputation: 8220

You should first overwrite background of active class, see here

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #555555;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

Example overwrite only class .active :

.navbar .nav > .active > a {
    background:none;
}

Or 

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
 background:none;
}

jsfidle

NOTE : If you are using bootstrap 2.3.x

Upvotes: 2

Related Questions