how to change bootstrap scrollspy active link color

Question

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?

CSS

#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>a>h3:active {
    color: red !important;
}

.nav-pills > .active > a, 
    .nav-pills > .active > a:hover {
    color: #ffffff !important;
    background-color: #1bb246;
}

Nav

<div id="stickysteps">
    <ul class="nav nav-pills">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
        <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
        <% n += 1 %>
        <% end %>
    </ul>
</div>

You may not be selecting it correctly. Can you make a fiddle? — brbcoding, Aug 08 '13 at 18:50

score 4 · Answer 1 · answered Sep 12 '16 at 09:40

4

This worked for me:
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: red !important; background-color: white; }

answered Sep 12 '16 at 09:40

leah

433
5
7

3

much simpler: `li.active a { color: red !important; background-color: white; }` – Unnamed Sentient Being Jan 03 '17 at 23:33

score 2 · Answer 2 · answered Feb 02 '18 at 00:21

This worked for me on Bootstrap v4

Added a class "nav-link" to each anchor-element:

<div class="collapse navbar-collapse " id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link active" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#projects">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#sharing">Sharing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#contact">Contact</a>
    </li>
  </ul>
</div>

Target with CSS like this, as stated above you have to override the default styling with !important.

.nav-link {
  color: white !important;
  text-transform: uppercase;
}
.nav-link.active {
  color: #FFCA47 !important;
}

score 0 · Answer 3 · answered Aug 08 '13 at 18:53

You shouldn't be editing the Bootstrap CSS files directly but rather editing the less files and then recompiling those to CSS. I can't remember for certain but the colour variables you are after are more than likely in the Variables.less file.

A way to play around with the colour schemes is to customise your bootstrap download (link is from the 2.3.2 version, Bootstrap 3.0 is out)

Gloria · Answer 4 · 2013-08-08T19:13:05.433

I hope you have included the Bootstrap JS file including the scrollspy plugin in your project. the current jsfiddle is not helpful as there is no reference to it.

The scrollspy adds the active class to the tab whose contents are being shown, which is why the following should work :

Change

  .nav-pills li>a>h3:active {
    color: red !important;
    }

to

 .nav .nav-pills > .active > a > h3 {
       color: red !important;
     }

to change color of the active links

As mentioned in the docs http://getbootstrap.com/2.3.2/javascript.html#scrollspy , for the plugin to work each

Nav links must have resolvable id targets. For example, a <a> href="#home">home</a> must correspond to something in the dom like <div id="home"></div>

.

score 0 · Answer 5 · answered Sep 05 '15 at 16:17

please add a navbar-nav class in the ul tag, this is for, so that it will not affect any other styles you have created.

<ul class="nav nav-pills navbar-nav">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
       <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
       <% n += 1 %>
       <% end %>
 </ul>

Then just add the css as follow:

.navbar-nav> .active > a,
.navbar-nav > .active > a:hover {
      color: #FFF !important;
      background-color: #000!important;
 }

add any css you would like to have.. Hope it works :)

score 0 · Answer 6 · answered Jun 16 '16 at 08:26

0

The problem at hand isn't a complex one, just a bit tricky.

Try this: first add an ID element to your link like so:

<a href="#step" id="page-scroll">Page</a>

Then from your css:

#page-scroll {
    background: #989898;
}

Hope it helps :)

answered Jun 16 '16 at 08:26

Sabatha

1

Adrian Gheorghe · Answer 7 · 2016-07-21T22:03:29.090

0

Try this

    .navbar-inverse .navbar-nav > .active{
    color: #e6e6e6 !important;
   background: rgba(39, 108, 45, 0.53) !important;
 }
 .navbar-inverse .navbar-nav > .active > a, 
 .navbar-inverse .navbar-nav > .active > a:hover, 
 .navbar-inverse .navbar-nav > .active > a:focus {
      background:rgba(235, 235, 235, 0) !important;
 }

edited Jul 21 '16 at 22:03

answered Jul 21 '16 at 20:54

Adrian Gheorghe

647
6
13

score 0 · Answer 8 · answered Jan 05 '18 at 10:34

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
color: #000;
background: #fff;
border-radius: 5px;

}

You can also change background of button on scrollspy

score -1 · Answer 9 · edited Mar 25 '15 at 11:34

-1

Its super easy after taking 30 minutes of research (I suck:$).

li.'example class'.active {
    CSS
}

so for you it would have been most likely:

li.nav-pills.active {

color: #ffffff !important;

background-color: #1bb246;}

edited Mar 25 '15 at 11:34

Soner Gönül

97,193
102
206
364

answered Mar 25 '15 at 11:16

Alan Williams

1

how to change bootstrap scrollspy active link color

9 Answers9