Como mudar a cor do active

[Sapinn 0]

Como mudar o cor da letra de um active em um menu no boostrtrap

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="icone.png" height="60px" alt="Logo">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      
          <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;">
            <ul class="navbar-nav" >
              <li class="nav-item active" >
                <a class="nav-link" href="#">Inicio</a>
              </li>
              <li class="nav-item" >
                <a class="nav-link" href="#">Login</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Aluno</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Professor</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Fale Conosco</a>
              </li>
            </ul>
          </div>
      
        </div>
      </nav>

 

[wanderval 19]

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

 

[Sapinn 0]

Já havia tentado isso mas não funcionou.

[wanderval 19]

4 horas atrás, Sapinn disse:

Já havia tentado isso mas não funcionou.

olha essa é a forma! o que deve estar acontecendo é que está sendo subscrito já que o css da bilbiotéca que está usando deve ter mais definições de classes para definir a cor.

.navbar.navbar-expand-lg.navbar-light.bg-light .container .navbar-collapse .navbar-nav .nav-item.active {
	color: red;
}  

[Sapinn 0]

Ainda não funciona, eu estou usando o bootstrap e acho que ele pode estar bloqueando de alguma forma essa propriedade.

[wanderval 19]

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

 

https://jsbin.com/kanoqiyuxa/edit?html,css,output

[agenciapixx 0]

Amigo, tenta usar o important para sinalizar que este código é o que deverá ser considerado.

.nav-item.active {
	color: red !important;
}

[HarryArcher 0]

Olha o que eu achei

a {
  color: #2c87f0;
}
a:visited {
  color: #636;
}
a:hover, a:active, a:focus {
  color:#c33;
}