4

Tengo un navbar sacado de bootstrap, y le quiero poner un color de fondo.

Intenté cambiarle desde css el color de fondo al nav y no pasó nada. Intenté en el div container fluid y se cambió, pero queda un espacio en blanco arriba y abajo. Intenté ponerle un header contenedor de todo y darle un background color, pero no pasa nada de nada. ¿Cómo puedo hacer?

Tengo linkeado bien el style y script de bootstrap, y sobre todo el link de css está después del linkeo de bootstrap.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top-header {
    height: 25px;
    width: 100%;
    background-color: #da3d92;
    border: 1px solid black;
}

header {
    background-color: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="./style/style.css">
    <title>Document</title>
</head>

<body>

    <div class="top-header"></div>
    <header>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</header>


    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>

</html>

2
  • Edité el título de tu pregunta en base a la descripción de tu pregunta. Sin embargo, al ejecutar el snippet, pareciera que buscás otra cosa. ¿Realmente estás queriendo modificar el <header> o solo el color del <nav>?
    – padaleiana
    el 15 abr. a las 14:32
  • @padaleiana Lo que quiero cambiar, es el color de fondo de todo el navbar. Pero como comente intente modificar desde css tanto el nav como el div y no sucedio nada. Por eso agregue un header contenedor para ver si asi se modificaba el color de fondo pero asi tampoco se modifica. Lo que esta arriba rosita, ignoralo, es otra cosa distinta el 15 abr. a las 14:41

1 respuesta 1

2

Tu le das un color por defecto (color gris) a tu nav con la clase bg-body-tertiary:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <!-- contenido -->
</nav>

Solo tendrías que quitarlo y cambias el color del navbar usando la clase navbar, así:

<nav class="navbar navbar-expand-lg">
  <!-- contenido -->
</nav>

<style>
  .navbar {
    background-color: green !important;
  }
</style>

Y aquí le aplicas los estilos que quieras (procura usar el !important en caso no funcione el estilo). Ejemplo:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-header {
  height: 25px;
  width: 100%;
  background-color: #da3d92;
  border: 1px solid black;
}

.navbar {
  background-color: green !important;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link rel="stylesheet" href="./style/style.css">
    <title>Document</title>
  </head>

  <body>

    <div class="top-header"></div>
    <header>
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                  aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    </header>


    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>

</html>

3
  • Muchisimas gracias. Ahora que mi duda esta resuelta tengo que cerrar el hilo o como es? Estoy empezando a usar stackoverflow asi que no tengo mucha idea el 15 abr. a las 14:59
  • Claro, puedes verificar la respuesta si te sirvió para que tu pregunta esté como respondida, marcándole al ✔️ que está al lado izquierdo de mi respuesta. el 15 abr. a las 15:02
  • 1
    O usar !important como último recurso. Es mejor primero aprender acerca de especificidad :)
    – padaleiana
    el 15 abr. a las 15:08

Tu Respuesta

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

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