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
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
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;
}
¿Aún con dudas?, en el siguiente video se ve algunos ejemplos de aplicación con diferentes themes WordPress
Artículos Relacionados
(6 votos, promedio: 4,50 de 5)
Cargando...
Me sirvió la ayuda, muchas gracias, solo que mis elementos del body se solapan, o sea el menu estático los cubre no sé si haya alguna solución, gracias y buen día.
Si se solapan es porque te falta posiblemente código CSS que defina el margin-top, revisa en el artículo verás que hay código CSS con margin-top, prueba poner un margen mayor y verifica.
Hola, quisiera saber si me pueden ayudar; tengo el tema 2017 de wordpress instalado en mi sitio que funciona en modo «one-page»
la sección del menú que figura como «.navigation-top » aparece después de la imagen, al scrollear hacia abajo cuando llega a la parte superior el» .navigation-top» se pega/adhiere y queda siempre visible.
Lo que yo quisiera hacer es que la zona del «.site-branding» con la imagen que figura en el header tenga esta misma función, es decir que al scrollear quede pegada a la parte superior junto con el menú (de esta manera se mantiene siempre visible el logo del sitio)
si me pudieran ayudar con esto se los agradecería un montón, ya que por el momento lo único que logré hacer por medio del código o plugins y css fue que se «pegue» sólo el logo pero no así la imagen del fondo
Para lo que comentas mejor comunícate a través del formularios de contacto, igual envía la url de tu sitio para saber a qué te refieres, ver el comportamiento y el código generado.
Hola! Está genial el tuto! pero, como edito el estilo desde la consola?? directamente desde chrome? o en alguna opción de WP?? sorry, soy nuevo con WordPress y aún me pierdo un poco…
Gracias de antemano
Hola, lo mejor sería que agregues el estilo desde Apariencia > Personalizar > CSS, la otra opción es que crees un tema hijo y lo agregues en el archivo style.css, revisa: https://decodecms.com/crear-un-child-theme-en-wordpress-de-manera-correcta/
Buenas Carlos, como estas? Tengo tema Astra, Elementor y se me complica porque fui a Personalizar, escribí el código de Heater{ position: fixed; with:100%} y no pasa nada. guardándolo y todo. tienes alguna recomendación.
Hola, las clases CSS podrían variar de un theme a otro, podrías revisar este artículo que usa el theme Astra: https://cgscomputer.com/how-to-create-a-sticky-header-with-the-free-astra-wordpress-theme/
Hola! Gracias por el tutorial. Leí unas cuantas publicaciones que realizaste pero no puedo encontrar algo que me ayude con lo que busco.
En la versión para moviles, quiero colocar un botón en el header, al lado del logo, en el centro. Que no esté dentro del menú off canvas. El resto de los botones sí pueden estar adentro. Pero quiero uno que quede afuera.
Busco que quede como el botón que tiene Unicef ( https://www.unicef.org/argentina/ ) en su versión para moviles. El botón que dice «DONA AHORA». Mi sitio es http://www.pequeñosgigantes.org.ar. Tengo el tema Salient
¿Se puede hacer algo asi?
Muchas gracias!
Hola, tal como lo planteas posiblemente sea necesario mover el botón o tener una copia del mismo que sólo se muestre en versión móvil, puedes revisar el siguiente artículo de relacionado: https://decodecms.com/mostrar-widget-lateral-al-inicio-moviles/
Gracias por responder! Estuve viendo lo que me pasaste. Pero no lo pude resolver con ese sistema.
Tal vez la solución sea como decís «mover el botón o tener una copia del mismo que sólo se muestre en versión móvil». Pero el caso es que lo sé hacer 🙁 No logro colocar un boton en el header del movil al lado del logo.
Se te ocurre cómo podría hacerlo??
Gracias de antemano y disculpa la molestia.
Saludos!