Cabecera fija en theme WordPress

[ 14 Junio 2017 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

Seguramente has visto algunos sitios que mantienen la cabecera fija al hacer scroll, esta funcionalidad usualmente es parte del theme, sin embargo si tienes un theme que no tiene esta funcionalidad podrías evaluar implementarla.

Resultado final cabecera fija

Al final obtendremos un resultado similar a lo siguiente:

1- Revisando la Estructura HTML

Básicamente para lograr esta funcionalidad el theme tiene que tener una estructura similar al siguiente código HTML

<body>
	<header>
		Codigo de la cabecera
	</header>
	<div class="content">
		Contenido del sitio
	</div>
</body>

En el código anterior:

La etiqueta HTML header representa el contenido que queremos fijar
La etiqueta div con la clase content igualmente la usaremos en nuestro código CSS para desplazar el contenido

En caso tu theme no tenga una estructura similar, posiblemente tengas que usar otras etiquetas (ver video) o realizar modificaciones a los archivos .php del theme

2- Código CSS para fijar la cabecera

Según nuestro código base, podemos usar el siguiente código CSS.


header{
	position: fixed;
	top:0;
	width:100%;
	height:20px;
	z-index:9999;

	background-color:black;
	color:white;
}

#content{
	margin-top:20px;
}

En el código anterior

La etiqueta header se posiona en fixed, además se usa el z-index con un valor alto para que la cabecera aparezca siempre por encima del resto de elementos
El div con el ID content tiene que ser desplazado y evitar la superposición con el header, es por eso que se da un margin-top

Puedes ver el archivo HTML de ejemplo generado con el código anterior en este enlace

3- Modo Responsive

Es muy probable que la altura de la cabecera cambie cuando el ancho de pantalla sea menor, en tal caso tienes dos opciones.

3.1- Cabecera fija siempre

Es decir, si cambia la altura de la cabecera en móvil, tienes que modificar la altura a través de media queries

Por ejemplo, si para un dispositivo de 780px de ancho la altura aumenta a 40px, entonces puedes agregar el siguiente código:


@media (max-width: 768px){
	header{
		height:40px;
	}

	#content{
		margin-top:40px;
	}	
}

3.2- Cabecera fija a partir de determinado ancho

Esto es más sencillo y sólo tienes que colocar una restricción al código inicial para que funcione a partir de un determinado ancho, usarás igual media queries.

Modifica el código inicial y agrega @media, por ejemplo para que funcione sólo a partir de 1024px tendrías un código como:


@media (min-width: 1024px){
	header{
		position: fixed;
		top:0;
		width:100%;
		height:20px;
		z-index:9999;

		background-color:black;
		color:white;
	}

	#content{
		margin-top:20px;
	}
}

4- Cabecera Fija animada con Javascript

Es posible que quieras variar los elementos de la cabecera, por ejemplo las dimensiones del logo, esto lo puedes lograr agregando una clase CSS dinámicamente a través de javascript.

Suponiendo que para la cabecera tienes una imagen con 400px de ancho con el siguiente código HTML:


<header>
	<img src="http://decodecms.app/wp-content/themes/decodecms/images/logo.svg" width="400" />
</header>

Puedes entonces agregar una clase al header con javascript


<script>
	$(window).scroll(function(){
		if ( $(this).scrollTop()>50 ){
			$('header').addClass("fijo");
		}
		else{
			$('header').removeClass("fijo");
		}
	});
</script>

En el código anterior

Usamos jquery y la función scroll como parte del código
Cuando el scroll es mayor a 50px se agrega una clase al header llamada fijo

Finalmente, tienes que codificar la clase CSS fijo en base al HTML de cabecera, reduciendo el ancho a 180px y dando una animación:


header.fijo img{
	width:180px;
	transition: all 0.4s ease;
}

Puedes ver el archivo HTML de ejemplo con javascript en este enlace

¿Aún con dudas?, en el siguiente video se ve algunos ejemplos de aplicación con diferentes themes WordPress

Navegación principal