Diseño, Tutoriales | 14 de octubre de 2014

Cómo crear una cabecera fija con HTML y CSS

Hay una versión actualizada de este tutorial en formato video y haciendo la cabecera responsive, puedes encontrarlo en Cómo crear una cabecera fija responsive 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:

Probablemente también has pasado por esto

Estabas muy entusiasta, el proyecto se veía interesante y entretenido. Cobraste bien y el cliente aceptó tu presupuesto sin cuestionamientos así que comenzaste a trabajar con el mejor de los ánimos. Todo iba de maravilla pero conforme avanzaba el proyecto la luz se iba desvaneciendo de a poco. Tal vez porque sentiste hostilidad de parte […]

Seguir leyendo...

Ya instalé WordPress ¿Qué hago ahora?

Hace un tiempo la gente de Hostinger publicó un tutorial súper detallado en donde explicaban paso a paso las diferentes formas de instalar WordPress, es básicamente una guía de instalación de WordPress y me invitaron a complementar su tutorial compartiendo qué es lo que hago yo una vez que WordPress ya está instalado. Así que […]

Seguir leyendo...

Libro Trece

Recientemente, mi amigo Elías Jauregui ha publicado su libro llamado “Trece” con “Ril Editores”, un libro de cuentos muy interesante y fácil de leer, que sirve tanto como fiel acompañante en los viajes de ida y regreso al trabajo, como agente liberador de la fomeídad que rodea a un domingo por la tarde o como […]

Seguir leyendo...

Hay 45 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?

  6. Muy buenas Fran!

    Antes de nada, quería decir que esta explicado mejor imposible. Enhorabuena por el trabajo bien hecho, y gracias por compartir tus conocimientos.

    Dicho esto, me gustaría saber si podrías echar una mano con una duda que me surge en este tema.

    No puedo pegar imágenes en el comentario, y quizás así hubiera sido mas fácil de explicar, pero aun así, voy a intentar hacerlo 🙂

    Tengo el menu fijo implementado arriba en mi página. El tema es que si ponemos un opacity:0.2 por ejemplo, vemos como cuando hay scroll, el menu sólo actúa como tal porque esta ‘por arriba’ del texto, pero éste sigue saliendo de la pantalla por si sitio por defecto. Qué me origina esto? Que por ejemplo los enlaces internos a modo de #seccion_n en mi página no se posicionen correctamente, porque lo hace arriba del todo, pero ahi esta el menu en realidad. Me explico? Sería genial para mi que el scroll de la página acabara donde acaba el menu superior. Es esto posible?

    Muchas gracias!

  7. ah oye yo no estudie programacio apenas tengo 12 años y estoy en segundo año en tercero pasare a elegir carrera quiero ser ingeniero en sistema y sin estudio alguno las pagnas me quedan geniales pero ahora tengo un problema

    TheCube

    y cuando bajo, la imagen y el texto se ponen arriba de la barra me ayudas porfavor

  8. Buen tutorial,
    solo tengo un problemita, el encabezado, efectivamente quedo fijo pero al desplazar las demás secciones con el scrollbar estas se montan encima del encabezado como puedo arreglarlo?

  9. Francisco
    Gracias por este tema de la cabecera fija
    Despues de algunas batallas de codigos a las cuales no estoy acostumbrado lo estoy instalando en unas paginas que estoy rediseñando de un portal
    Solo hay un problema que no he podido solucionar y es que la publicidad de GoogleAds cuando bajas en la pagina se sobre pone a la cabecera.
    Se que se puede poner para que pase por debajo porque lo he visto en otras paginas lo que no se es como.
    Si tienes alguna sugerencia siempre sera bien recibida y con mi agradecimeinto por tu ayuda.
    Saludos
    Luis

  10. Buenas tardes Francisco

    Ha sido de gran ayuda todo lo que he aprendido contigo. Tengo aún el problema de utilizar las opciones del menú para mostrar los contenidos de los mismos, me podrías ayudar para que al dar clic en otra opción del menú me aparezca la información de esa opción.

    Te agradezco mucho tus enseñanzas

  11. Muy buena tu explicación, me sirvio bastante, me gustaria saber como hago, para en lazar las diferentes paginas de inicio, acerca de, etc, porfavor y gracias.

    Saludos desde Bogotá Colombia

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 8.191 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.