title: how to change bootstrap scrollspy active link color
body: <p>I'm using scrollspy with bootstraps nav-pills navbar, and can't seem to change the color of the active links, or the hover color. I've been trying all sorts of combinations and still can't seem to figure out why I can't change the color. Any ideas why?</p>
  
  <p>CSS</p>
  
  <pre><code>#stickysteps {
      background: #1bb246;
      width:100%;
      position: absolute;
      z-index: 2;
  }
  
  #stickysteps h3 {
      color: #454545;
      font-size: 1.6em;
      text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
      -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;
  }
  
  .nav-pills{
      background-color: #1bb246 !important;
      width: auto !important;
      height: auto !important;
      box-shadow: none;
  }
  
  .nav-pills li {
      background-color: #1bb246;
      width: auto;
      height: auto;
  }
  
  .nav-pills li&gt;a&gt;h3:active {
      color: red !important;
  }
  
  .nav-pills &gt; .active &gt; a, 
      .nav-pills &gt; .active &gt; a:hover {
      color: #ffffff !important;
      background-color: #1bb246;
  }
  </code></pre>
  
  <p>Nav </p>
  
  <pre><code>&lt;div id="stickysteps"&gt;
      &lt;ul class="nav nav-pills"&gt;
          &lt;% n = 0 %&gt;
          &lt;% @manual.steps.order(:priority).each do |step| %&gt;
          &lt;li&gt;&lt;a href="#step&lt;%= n+1 %&gt;"&gt;&lt;h3&gt;Step &lt;%= n + 1 %&gt;&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;% n += 1 %&gt;
          &lt;% end %&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>