Color not changing for active nav item

Bootstrap Studio Help
1

I tried to override active nav in styles tab with

.nav-link.active {
color: red;

but text is not red for active item?

2

I’m going to guess, that you didn’t find the right place to change it. Experiment with all the different parts of the nav and overwrite them one at a time an you’ll get to it just like we had to do :slight_smile: It’s a great way to learn what does what in the struture as well.

3

If that’s your actual code, you have a typo. You used a period to separate the .nav-link from the pseudo class active. It should be a colon. And there’s no close bracket. Should look like this…

.nav-link:active {
 color: red;
}
4

.navbar-light .navbar-nav .active .nav-link

will always have a higher specificity overide than

.nav-link :active

Codecaptain

5

.navbar-light .navbar-nav .active .nav-link {
color: red;
}

.nav-link:active {
color: red;
}

.navbar-nav > .active > a {
color: red;
}

none of these work.

6

Can you post a link to your website?

7

Oh sorry I was just discussing how specificity works with css. If you want css try this:

.navbar-light .navbar-nav .nav-link.active {
  color: red;
}

(Obviously without knowing which Bootstrap component the nav-link is, we all will just be guessing.)

8

Sorry I’m just trying out Bootstrap Studio locally.

9

This one works. Thanks. But how do you know how to be specific
it bypassed several classes like nav.