Cómo hacer un header transparente en Elementor

En este vídeo os enseño cómo hacer un header transparente con dos líneas de código y la versatilidad que ello os dará para ir variando vuestros diseños entre una cabecera y otra. Os pongo dos ejemplos de webs desarrolladas por mí, arriba header transparente y abajo fijo:

ejemplo blog albertoperojo cabecera fija

Por defecto la mayoría de las plantillas vienen con un header fijo, es decir, una sección superior con un menú de navegación y el logo de la página web. Para lograr el efecto de cabecera transparente, simplemente tenemos que cambiar el posicionamiento de la sección superior que contiene el header.
Cabe destacar que es necesario que la sección inferior, en la que se «fundirá» la cabecera, deberá tener un margen superior suficiente para albergar nuestro header así como un color de fondo que deje ver las letras del menú y el logo.

Código:

header {
position: absolute;
width: 100%;
}

Si te ha gustado, comparte!

WhatsApp
Facebook
Twitter

8 comentarios

  1. Hola Alberto, ¿indicas que con elementor se puede fusionar la cabecera también sin código? Por favor, ¿podrías indicar cómo se haría? Muchas gracias

    1. Puedes usar las plantillas generatepress,oceanwp o Astra. Creo que todas disponen de esa funcionalidad en su versión gratuita.

Deja una respuesta

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