Home / Questions / 193437
Accepted
ricardo leiva sikic
Asked: 2020-09-03 10:39:53 +0800 CST 2020-09-03 10:39:53 +0800 CST

Change navbar background

  • 772

I have a bootstrap navbar (download the CDN to set all changes to the bootstrap page). The problem is that I can't change its background, no matter how much I go into its classes and use !important, I've checked with inspect the elements in the DOM and nothing happens with the changes.

I attach the navbar code:

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

navbar

Home(current) About us Services Articles Contact

I attach the css code:

.navbar {
background: red !important;

}

It should be noted that I have also tried to take the classes that the element inspector (bg-light) tells me and the background does not change either.

css

3 Answers

  1. Best Answer

    This is due to the specificity of CSS, which is to determine which styles will take precedence for the browser. If you declare an element a background:red via a class, then background:red via an ID, and finally via an inline style <nav style="background:red"></nav>, the browser will establish a hierarchy as follows:

    1-STYLES ONLINE

    2-ID

    3-CLASS

    When an !important is declared, the browser ignores the specificity and sets the style even if it is only in one class. That is the reason why even if you declare a background in your styles and add an important to it, the browser ignores it and sets the bootstrap ones, because the navbar is assigned a .bg-lght class that takes precedence over other classes. In these cases it is recommended that you reference your stylesheet after the bootstrap CDN: example:

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

    Don't forget to set !important to your styles, because if the browser has two classes with !important, it will give priority to the last one.

    BOOTSTRAP

    nav{
background: red !important
}

    YOUR STYLES

    nav{
background: red !important
}

    Official documentation:

    https://developer.mozilla.org/en/docs/Web/CSS/Specificity

    • 5

  2. Modify navbar classes

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

    bootstrap documentation

    • 2

  3. Delete the Bg-LIGHT and write a class to it that you want, for example class="bg-personal"

    Then in THE css

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