CODEWITHSUNDEEP
cssbootstrap-4
keneso
keneso

Reputation: 311

bootstrap 4 change color of nav-pill active

I can assign custom background color for each of the pills, but what I really would like is to have a faded color of each custom one (which is just a matter of changing the values in the above), and have the active color match that full color of corresponding pill.

When

my code

<ul class="nav nav-pills">
  <li class="nav-item pill-1">
    <a class="nav-link active" href="#">pill one</a>
  </li>
  <li class="nav-item pill-2">
    <a class="nav-link" href="#">pill two</a>
  </li>
  <li class="nav-item pill-3">
    <a class="nav-link" href="#">pill three</a>
  </li>
</ul>

css

.pill-1 a {
    background-color: rgba(255, 0, 0, 0.5);
}

bootstrap override

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #d9d9d9;
}

Upvotes: 9

Views: 25726

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Use the appropriate CSS specificity for the active/inactive pills. For example:

https://www.codeply.com/go/Oe6EteovP0

/* not active */
.nav-pills .pill-1 .nav-link:not(.active) {
    background-color: rgba(255, 0, 0, 0.5);
}

.nav-pills .pill-2 .nav-link:not(.active) {
    background-color: rgba(0, 250, 0, 0.5);
}

.nav-pills .pill-3 .nav-link:not(.active) {
    background-color: rgba(0, 0, 250, 0.5);
    color: white;
}


/* active (faded) */
.nav-pills .pill-1 .nav-link {
    background-color: rgba(255, 0, 0, 0.2);
    color: white;
}

.nav-pills .pill-2 .nav-link {
    background-color: rgba(0, 250, 0, 0.2);
}

.nav-pills .pill-3 .nav-link {
    background-color: rgba(0, 0, 250, 0.2);
    color: white;
}

Upvotes: 16

Related Questions