Así que estoy usando una barra de navegación Bootstrap para un sitio web que estoy haciendo y cuando trato de cambiar el color de los enlaces, solo cambia uno.

Ya he intentado usar diferentes nombres de clase y eliminar clases innecesarias.

Html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item colorMe">
        <a class="nav-link" href="members-login">Members</a>
      </li>
      <li class="nav-item colorMe">
        <a class="nav-link" href="lifeguard-login">Lifeguards</a>
      </li>
    </ul>
  </div>
</nav>

Css:

.colorMe{
    color:darkgreen !important;
}

Cuando intento hacer esto, el único enlace que cambia es el que dice "Acerca de nosotros". ¡Gracias!

1
otc09 8 oct. 2019 a las 23:13

3 respuestas

La mejor respuesta

Su clase .colorMe existe en el enlace Acerca de nosotros, pero en el elemento principal de la lista de los otros dos. Simplemente mueva esa clase del elemento de la lista al enlace y funcionará.

Ejemplo de arranque

La razón por la que no funciona solo en el elemento primario de la lista es porque Bootstrap ya tiene un selector más específico, .navbar-light .navbar-nav .nav-link, que anula su CSS.

2
j08691 8 oct. 2019 a las 20:18

Actualice la clase colorMe al elemento a en lugar de li

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link colorMe" href="members-login">Members</a>
      </li>
      <li class="nav-item">
        <a class="nav-link colorMe" href="lifeguard-login">Lifeguards</a>
      </li>
    </ul>
  </div>
</nav>
1
Dhananjai Pai 8 oct. 2019 a las 20:19

Es porque pones clases al elemento <li> en lugar de <a>. Espero eso ayude.

.colorMe{
    color:darkgreen !important;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="landingPage">Cottrell Pier Association</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link colorMe" href="aboutUs">About Us<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item ">
        <a class="nav-link colorMe" href="members-login">Members</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link colorMe" href="lifeguard-login">Lifeguards</a>
      </li>
    </ul>
  </div>
</nav>
1
Ashylen 8 oct. 2019 a las 20:18
58293445