Barra de navegación (Navbar) transparente con Bootstrap y CSS

En el diseño web uno de los efectos más solicitados por los clientes es un menú transparente sobre una imagen de fondo. Este tipo de diseño es utilizado frecuentemente en el desarrollo de landing pages así como en páginas de contacto. Veamos a continuación cómo lograrlo.

Una landing page (página de aterrizaje) es un estilo de diseño web en el que se busca atraer la atención de los visitantes con el propósito de volverlos posibles clientes al mostrarle información acerca de un producto o servicio en venta de forma llamativa y puntual.

Lograr tal efecto resulta relativamente fácil utilizando CSS. Para este ejemplo en particular nos apoyaremos de la librería Bootstrap para obtener un menú de ejemplo rápidamente.

Vamos a copiar el componente de ejemplo navbar desde la web oficial de Bootstrap http://getbootstrap.com/docs/4.1/components/navbar/#nav

  <header class="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </header>

Como resultado veríamos lo siguiente:

Modificación de los estilos CSS

Con el propósito de poder modificar el componente navbar englobamos el código de Bootstrap dentro de la etiqueta <header class="header"></header>.

A continuación, creamos unos estilos CSS para cambiar la visualización de la barra de navegación.

.header {
  background: url(../img/bg-header.jpeg) no-repeat center;
  background-size: cover;
  min-height: 100vh;
}

En la clase .header agregamos el atajo background para definir el nombre de una imagen de fondo que nos permita conseguir el efecto deseado. En nuestro caso estamos utilizando una imagen llamada bg-header.jpeg. Con no-repeat indicamos que no queremos que se repita dicha imagen y con center definimos que la imagen se posicione desde el centro de su ubicación.

Por otro lado, background-size: cover permite que la imagen se adapte al ancho de su contenedor. En esto caso el 100% de la pantalla desde donde se esté visualizando.

Es recomendable para lograr una apariencia llamativa utilizar imágenes de alta resolución (en este caso se utilizó una de 1920×1440)

Adicionalmente, con min-height: 100vh le estamos diciendo al contenedor .header que ocupe el total del alto de la pantalla desde donde estamos viendo el diseño.

Con estos cambios la barra de navegación luciría de esta manera:

Por último, para lograr que la barra de navegación sea transparente debemos agregar en el CSS:

.header .navbar {
  background-color: transparent !important;
}

En este caso,.header .navbar nos permitirá sobreescribir los estilos por defecto que aplica Bootstrap al componente navbar que tenemos en el header. Agregando la propiedad background-color: transparent !important; eliminamos el color de fondo por defecto que Bootstrap aplica.

El atributo !important establece tome el valor transparent por sobre cualquier otro background-color definido para la clase que se encuentre al mismo nivel de .header. Bootstrap por defecto aplica el !important en la mayoría de sus declaraciones por lo que es obligatorio hacer esto si se quiere que tome nuestra modificación.

Como tip adicional, si quisiéramos que el menú ubicado dentro del componente navbar quede centrado con respecto al logo y al formulario de búsqueda solo debemos cambiar la clase <ul class="navbar-nav mr-auto"> por <ul class="navbar-nav m-auto">.

Como resultado final obtendríamos: