5

Tengo un navbar de bootstrap (baje el CDN para establecer todos los cambios en la pagina con bootstrap). El problema es que no le puedo cambiar el fondo de este, por mas que me meta a sus clases y utilize !important, he revisado con inspecccionar los elementos en el DOM y no ocurre nada con los cambios.

Adjunto el codigo del navbar:

<nav class="back-nav navbar navbar-expand-lg navbar-light bg-light">

Navbar

Home(current) Nosotros Servicios Articulos Contacto

Adjunto el codigo del css:

.navbar {
background: red !important;

}

Cabe señalar que tambien he intentado tomar por las clases que me dice el inspector de elementos (bg-light) y tampoco cambia el background.

3 respuestas 3

5

Esto se debe a la especificidad de CSS, La cual consiste en determinar que estilos tendran prioridad para el navegador. Si usted declara a un elemento un background:red mediante una clase, luego background:red mediante un ID y por último mediante un estilo en línea <nav style="background:red"></nav> el navegador establecerá una jerarquía de la siguiente manera:

1-ESTILOS EN LÍNEA

2-ID

3-CLASE

Cuando se declara un !important el navegador ignora la especificidad y establece el estilo aunque este esté solo en una clase. Esa es la razón por la que aunque usted declare en sus estilos un fondo y le agregue un important el navegador lo ignora y establece los de bootstrap, debido a que el navbar tiene asignado una clase .bg-lght que toma precedencia sobre otras clases. En estos casos se recomienda que haga la referencia a su hoja de estilos después del CDN de bootstrap: ejemplo:

<link rel="stylesheet" href="bootstrap">
<link rel="stylesheet" href="susEstilos">

Sin olvidar que debe establecer !important a sus estilos, ya que si el navegador tiene dos clases con !important, dará prioridad a la última.

BOOTSTRAP

nav{
background: red !important
}

SUS ESTILOS

nav{
background: red !important
}

Documentación oficial:

https://developer.mozilla.org/es/docs/Web/CSS/Especificidad

1
  • Gracias amigo solucionado
    – Richi
    el 2 sep. 2018 a las 19:36
2

Modifica las clases del navbar

<nav class="navbar navbar-light" style="background-color: red;">
    <!-- Navbar content -->
</nav>

Documentación de bootstrap

1

Borra el Bg-LIGHT y escribele una clase que quieras como por ejemplo class="bg-personal"

Luego en EL css

.bg-personal{
  background-image: url (Aqui va la url de tu imagen)
}

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.