Diseño, Tutoriales | 14 de octubre de 2014

Cómo crear una cabecera fija con HTML y CSS

En el artículo de hoy quiero mostrarte de qué manera puedes crear una cabecera fija para tu sitio, tal como la que puedes ver en este mismo sitio. Me refiero a una cabecera que se queda pegada e la parte superior de la ventana, incluso aunque hagas scroll hacia abajo.

Para comprender este tutorial por completo necesitarás un entendimiento básico de HTML y CSS, si aún no conoces de estos lenguajes, te recomiendo mi curso “Diseño web: HTML y CSS desde cero“.

Bueno, basta de introducción, vamos al tutorial 😉

HTML Base

Lo primero, por supuesto será maquetar el HTML que compondrá nuestra página. Para efectos de este ejemplo crearemos una cabecera, que contendrá el nombre del sitio y el menú de navegación. Luego tendremos el contenido, que tendrá un título, una imagen y varios párrafos de texto, para finalizar con el pie de página.

El código para esto sería el siguiente:

Con esto estaríamos obteniendo algo más o menos como esto:

html-plano

Estilos generales

Ahora es momento de aplicar algunos estilos generales para que la página tenga algo de diseño. Usaremos CSS en el archivo style.css. Este es el código que usaremos para definir los estilos generales:

Estas líneas de CSS las usaremos para dar estilo a la cabecera:

Con estos estilos aplicaremos diseño al contenido:

Y por último, con esto estilizaremos el pie de página:

Hasta ahora la página se ve bastante bien, pero aún no hacemos que la cabecera sea estática, pero tranquilo ya llegaremos a ello, recuerda que soy diseñador y me gusta que las cosas se vean bien 😉

Así está la página actualmente:

html-con-estilos

Fijando la cabecera

Ok, llegó el momento de fijar la cabecera, para ello, agregaremos algunas propiedades al selector #main-header:

Con esto ya conseguimos que la cabecera se fije en la parte superior, aunque lamentablemente queda cubriendo el contenido.

Esto ocurre ya que cuando usamos la propiedad “position” con el valor “fixed” el elemento al cual aplicamos este estilo se sale del flujo natural del contenido y se posiciona de manera fija de acuerdo a las coordenadas “left“, “top“, “right” y “bottom” por encima del resto de los elementos.

Así está quedando actualmente:

cabecera-fija

Solucionar esto es bien sencillo, solo debemos añadir al elemento  body, un padding o relleno superior igual a la altura de la cabecera. Entonces quedaría así:

Con esto conseguimos que la cabecera siga fija, pero que no cubra el contenido 🙂

Mira un ejemplo completamente funcional a continuación. Puedes mirar el código fuente, crear una copia y editarlo a tu antojo.

See the Pen nmBog by Francisco Aguilera G. (@FranciscoAMK) on CodePen.9272

El código que vimos en este tutorial debería funcionar bien para todos los navegadores modernos. Está probado en las últimas versiones de Chrome, Safari, Firefox y Ópera en mac.

Cuéntame en los comentarios si te resulta interesante este tema para seguir publicando más material de este tipo.

Un abrazo,
@FranciscoAMK

::

Crédito de las imágenes de gatitos.

También te podría interesar:

Qué hacer cuando el proyecto se te fue de las manos

Bienvenidos a un nuevo episodio de Huevos Revueltos, un show semanal, en donde virtualmente te invito a tomar desayuno conmigo y a reflexionar sobre lo que significa ser un creativo profesional. El capítulo de hoy es un poco más largo de lo habitual, ya que analizaremos la situación de Viviana, una diseñadora que tiene que lidiar […]

Seguir leyendo...

¿Qué harías si fueras un héroe creativo?

Eran alrededor de las 3 de la madrugada cuando comenzó. Se sintió fuerte pero no le di mucha importancia. «Debe sentirse así de intenso porque estamos en el décimo piso» pensé, pero pronto comprendí que no se trataba de un sismo común y corriente sino de un terremoto. Esa noche del 27 de febrero del […]

Seguir leyendo...

5 consejos para usar correctamente photoshop en el diseño web

Photoshop es la herramienta que todo diseñador sabe utilizar Encontrar un diseñador que no sepa utilizar Photoshop, por lo menos en un nivel intermedio o básico, es tan raro como encontrar un carpintero que no sepa usar un martillo. Es por ello que photoshop se convierte en la opción “por defecto” para el diseño de […]

Seguir leyendo...

Hay 27 opiniones

  1. Hola Francisco, interesante el artículo. Gracias por compartirlo con nosotros.
    Faltaría que el menú se pudiese ver en una pantalla pequeña, de un móvil por ejemplo.
    ¿No crees?

    Un saludo

  2. Hola. Estoy creando un sitio y tengo el problema de que al poner la cabecera fija, al hacer scroll hacia abajo la imagen del slideshow pasa por encima del header. ¿Tienes alguna sugerencia para solucionarlo? Lo he intentado todo y no hay manera. Ya lo he dejado por imposible con mis todavía escasos conocimientos de estas artes… Gracias amigo.

  3. Muy buen tutorial…..me sirvio mucho….y me funciono…….pero seria bueno que anexes links con mas casos diversos sobre cabeceras fijas…….en este caso la cabecera ocupa toda la pagina…pero las que en donde el body tienen margin??…..como se procede??……o no se que otros casos complicados se pueden presentar cuando uno quiere fijar cualquier cabecera de cualquier estilo……..fuera de eso……repito estuvo buenazo tu tutorial……..muchas gracias….suerte…saludos…bye…

  4. Hola Francisco.
    El post me ha parecido genial y he empezado a aprender mucho a partir de él ¡Muchas gracias! Sin embargo, al tratarlo de implementar a un proyecto personal que estoy realizando, me ha causado problemas usando el navegador Chrome.
    La sección de navegación es precisamente lo que me causa el problema. Mientras que en Firefox se muestra el bloque linean, con las opciones que yo deseé agregar, en Chrome no lo hace así y pone uno o más elementos en una segunda línea.

    He tratado de investigar por mi cuenta alguna posible solución pero sigo sin tener éxito ¿A qué crees que se deba esto? Saludos.

  5. Muy buena explicación, aunque sucede que tengo elaces que me llevan a un lugar específico en la página y la cabecera tapa la parte inicial del titulo al que me dirije el enlace ¿Sabes como solucionarlo?

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 10.903 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.