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/[email protected]/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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
    Commented el 15 abr. 2023 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 Commented el 15 abr. 2023 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/[email protected]/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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Commented el 15 abr. 2023 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. Commented el 15 abr. 2023 a las 15:02
  • 1
    O usar !important como último recurso. Es mejor primero aprender acerca de especificidad :)
    – padaleiana
    Commented el 15 abr. 2023 a las 15:08

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.