Publicado em 24 de nov.

Como mudar a cor do active

#css #desenvolvimento-frontend #bootstrap #html

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>

Discussão (7)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

wanderval· 30 de nov.

.nav-item.active {

	color: red;
}

Sapinn· 1 de dez.

Já havia tentado isso mas não funcionou.

wanderval· 1 de dez.

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· 2 de dez.

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

wanderval· 2 de dez.

.navbar-nav .nav-item.active .nav-link{

	    color: red;

	}  

	 

	[https://jsbin.com/kanoqiyuxa/edit?html,css,output](https://jsbin.com/kanoqiyuxa/edit?html,css,output)

agenciapixx· 29 de jan.

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

.nav-item.active {

	color: red !important;
}

HarryArcher· 5 de mar.

Olha o que eu achei

a {

 color: #2c87f0;
}

a:visited {

 color: #636;
}

a:hover, a:active, a:focus {

 color:#c33;
}