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:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Cabecera fija</title>

        <link rel="stylesheet" href="style.css">
</head>

<body>
	
	<header id="main-header">
		
		<a id="logo-header" href="#">
			<span class="site-name">FranciscoAMK</span>
			<span class="site-desc">Diseño web / WordPress / Tutoriales</span>
		</a> <!-- / #logo-header -->

		<nav>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Acerca de</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>
		</nav><!-- / nav -->

	</header><!-- / #main-header -->

	
	<section id="main-content">
	
		<article>
			<header>
				<h1>Esta es una página con cabecera fija</h1>
			</header>
			
			<img src="http://placekitten.com/800/250" alt="Gatito" />
			
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			</div>
			
		</article> <!-- /article -->
	
	</section> <!-- / #main-content -->

	
	
	<footer id="main-footer">
		<p>&copy; 2014 <a href="http://FranciscoAMK.com">FranciscoAMK.com</a></p>
	</footer> <!-- / #main-footer -->

	
</body>
</html>

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:

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
}

h1 {
	font-size: 2.3em;
	line-height: 1.3em;
	margin: 15px 0;
	text-align: center;
	font-weight: 300;
}

p {
	margin: 0 0 1.5em 0;
}

img {
	max-width: 100%;
	height: auto;
}

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

#main-header {
	background: #333;
	color: white;
	height: 80px;
}	
	#main-header a {
		color: white;
	}

/*
 * Logo
 */
#logo-header {
	float: left;
	padding: 15px 0 0 20px;
	text-decoration: none;
}
	#logo-header:hover {
		color: #0b76a6;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 700;
		font-size: 1.2em;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.8em;
		color: #999;
	}
	

/*
 * Navegación
 */
nav {
	float: right;
}
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
	}
	
		nav ul li {
			display: inline-block;
			line-height: 80px;
		}
			
			nav ul li a {
				display: block;
				padding: 0 10px;
				text-decoration: none;
			}
			
				nav ul li a:hover {
					background: #0b76a6;
				}

Con estos estilos aplicaremos diseño al contenido:

#main-content {
	background: white;
	width: 90%;
	max-width: 800px;
	margin: 20px auto;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
}

	#main-content header,
	#main-content .content {
		padding: 40px;
	}

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

#main-footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 20px;
	margin-top: 40px;
}
	#main-footer p {
		margin: 0;
	}
	
	#main-footer a {
		color: white;
	}

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:

#main-header {
	background: #333;
	color: white;
	height: 80px;
	
	width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
	left: 0; /* Posicionamos la cabecera al lado izquierdo */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
}

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í:

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
	
	padding-top: 80px; /* Relleno superior igual a la altura de la cabecera*/
}

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:

Convencer al cliente de que no quite mi link del pie de página

Hace unos días un amigo y colega del mundo web me hizo una pregunta muy interesante. Sucede que recientemente había completado un sitio web para un cliente y éste le pidió que por favor eliminara del pie de página el enlace que apuntaba a su portafolio. La duda de mi amigo fue «¿Cómo convencer al […]

Seguir leyendo...

¿Es necesario saber dibujar para ser diseñador?

En el video estilo libre sin edición ni cortes de hoy hablamos sobre la clásica pregunta ¿Es necesario saber dibujar para ser diseñador?. Comparte en los comentarios ¿Te gusta o sientes que te hace falta saber dibujar? Un abrazo, @FranciscoAMK

Seguir leyendo...

No lo tengo todo resuelto

En el video Estilo Libre, sin cortes ni ediciones de esta semana hablamos acerca de las cosas que pensé después de hablar por teléfono con un amigo. Quizás pienso mucho después de hablar por teléfono, por eso no hablo casi con nadie. Cuéntame en los comentarios tu opinión sobre el tema de hoy. Hasta la […]

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.276 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

Ya me suscribí antes, no me muestres esto.