Saltar al contenido

bootstrap: ¿cómo poner la barra de navegación encima de la imagen de fondo?

Solución:

Bootstrap 4

La barra de navegación no tiene color de fondo, por lo que es transparente de forma predeterminada. Solo recuerda usar navbar-light o navbar-dark entonces el colores de enlace trabajar con el contraste de la imagen de fondo. Visualización del alternador también se basa en navbar- (oscuro o claro).

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="https://foroayuda.es/#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="https://foroayuda.es/#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap 3

Usar navbar-fixed-top y luego cambie el CSS para hacerlo transparente. A continuación, se muestra un ejemplo de una barra de navegación transparente personalizada. http://www.codeply.com/go/JNy8BtYSem

  <nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
    <div class="container">
        <div class="navbar-header">
      <a href="https://foroayuda.es/#" class="navbar-brand">Brand</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-bars"></i>
      </a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="https://foroayuda.es/#">Link</a></li>
          <li><a href="https://foroayuda.es/#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li>
           <a href="https://foroayuda.es/#">Link</a>
          </li>
        </ul>
      </div>        
    </div>
  </nav>

Esta pregunta es solo para hacer que la barra de navegación sea transparente. Para cambiar el estilo después de desplazarse o en alguna posición de la barra de navegación, consulte: Animar / encoger la barra de navegación en el desplazamiento usando Bootstrap 4

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *