0

Estoy intentando poner un hover a cada sección del menú para que cuando pase por encima el cursor cambie el color de las letras pero no me lo hace... ¿A que se debe? Gracias

.navbar-dark .navbar-nav .nav-link:hover{
    color: orange;
}
<!-- MENÚ -->
    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-light">
        <div class="container">
            <img src="assets/img/logo.jpg" alt="logo" width="80" height="80" class="d-inline-block align-text-top">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active text-dark nav-item" aria-current="page" href="#inicio">Inicio</a>
                    <a class="nav-link text-dark nav-item" href="#">Productos</a>
                    <a class="nav-link text-dark nav-item" href="#">Quiénes Somos</a>
                    <a class="nav-link text-dark nav-item" href="#">Contacto</a>
                </div>
            </div>
        </div>
    </nav>

2 respuestas 2

1

Edit: Sucede que tiene el text-dark que contiene lo siguiente

color: #343a40!important;

Entonces para sobreescribirlo tienes dos caminos, añadir !important

.navbar-dark .navbar-nav .nav-link:hover{
    color: orange !important;
}

O bien, revisar que utilizas de text-dark, si es compatible con lo que estás intentando, si se puede quitar la clase, etc.

.navbar-dark .navbar-nav .nav-link:hover{
    color: orange !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- MENÚ -->
    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-light">
        <div class="container">
            <img src="assets/img/logo.jpg" alt="logo" width="80" height="80" class="d-inline-block align-text-top">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active text-dark nav-item" aria-current="page" href="#inicio">Inicio</a>
                    <a class="nav-link text-dark nav-item" href="#">Productos</a>
                    <a class="nav-link text-dark nav-item" href="#">Quiénes Somos</a>
                    <a class="nav-link text-dark nav-item" href="#">Contacto</a>
                </div>
            </div>
        </div>
    </nav>

2
  • con el background-color lo que me hace es ponerle un fondo naranja, yo lo que quiero es cambiarle el color de la letra.
    – amnexiaco
    Commented el 16 dic. 2021 a las 17:48
  • No había entendido entonces. Respuesta editada. Commented el 16 dic. 2021 a las 18:03
0

Agrégale un !important al final de la declaración de color, así:

.navbar-dark .navbar-nav .nav-link:hover{
    color: orange !important;
}

.navbar-dark .navbar-nav .nav-link:hover{
    color: orange !important;
}
<!-- MENÚ -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-light">
        <div class="container">
            <img src="assets/img/logo.jpg" alt="logo" width="80" height="80" class="d-inline-block align-text-top">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active text-dark nav-item" aria-current="page" href="#inicio">Inicio</a>
                    <a class="nav-link text-dark nav-item" href="#">Productos</a>
                    <a class="nav-link text-dark nav-item" href="#">Quiénes Somos</a>
                    <a class="nav-link text-dark nav-item" href="#">Contacto</a>
                </div>
            </div>
        </div>
    </nav>

3
  • Solucionado, muchísimas gracias!
    – amnexiaco
    Commented el 16 dic. 2021 a las 17:49
  • El uso de !important siempre es considerado mala práctica y más cuando fuerzas la sobreescritura de un framework como BS que ya de por sí lo hace. Una opción podría ser añadir una nueva hoja de estilos donde crees una clase personalizada para el hover y luego linkearlo "más abajo" (cascada) que el link de BS Commented el 21 dic. 2021 a las 3:35
  • @JheymanMejia: ¿Podrias ser mas explícito? Si aportas tu solución como respuesta explicando mejor lo de "más abajo" (cascada) seguramente la comunidad te lo agradecerá. Particularmente no lo he entendido y necesito más información. Aunque opciones hay muchas, se me ocurre tambien recompilar el bootstrap cambiando el color con la variable de sass correspondiente, y así tener un bootstrap personalizado, pero diria que así aún confundiré más a amnexiaco pues no se si quiere saber tanto o tan solo quiere cambiar ese color en su pregunta.
    – masterguru
    Commented el 21 dic. 2021 a las 6:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.