• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Cabecera fija en theme WordPress

Cabecera fija en theme WordPress

Cabecera Fija Theme WordPress

[ 14 junio 2017 ] [ Actualizado: 13 enero 2021 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Animación de cabecera fija

 

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%;
	max-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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cambiar el logo en cabecera fija en un tema WordPressCambiar el logo en cabecera fija en un tema WordPress
  • Subtítulo desde título de la entrada en WordPressSubtítulo desde título de la entrada en WordPress
  • Redes sociales en la cabecera WordPressAgregar redes sociales en la cabecera de WordPress
  • Plantillas de página en WordPressPlantillas de página en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (6 votos, promedio: 4,50 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Israel García Serrano

    17 junio, 2019

    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.

    • Jhon Marreros Guzmán

      17 junio, 2019

      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.

  2. ANA

    24 octubre, 2019

    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

    • Jhon Marreros Guzmán

      30 octubre, 2019

      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.

  3. Alex

    23 marzo, 2020

    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

    • Jhon Marreros Guzmán

      23 marzo, 2020

      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/

  4. mariano

    17 julio, 2020

    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.

    • Jhon Marreros Guzmán

      19 julio, 2020

      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/

  5. Jose Maria

    3 septiembre, 2020

    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!

    • Jhon Marreros Guzmán

      3 septiembre, 2020

      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/

  6. José María

    4 septiembre, 2020

    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!

  7. Leire

    5 octubre, 2020

    Hola esta es mi página web; http://www.hoxteamcompany.com/, y quisiera que mi cabecera no estuviese fija. Es el tema de Dyad de WordPress y de verdad no consigo que no esté fija. En CSS adicional ya he probado:
    CSS 1.
    .site-banner .site-banner-media::before, .banner-custom-header .site-banner-media::before {
    background: none;
    }

    CSS 2.
    .site-header, .is-scrolled .site-header, .blog .site-header, .home .site-header

    • Jhon Marreros Guzmán

      7 octubre, 2020

      Hola, actualmente ya veo que la cabecera no esta fija, al menos el menú, sin embargo si que la imagen se ve fija, teóricamente debería ser alguna opción del theme, busca en la configuración del theme, o consulta con los desarrolladores.

  8. fran

    23 diciembre, 2020

    Muy buen artículo, tengo una duda, en responsive, cómo ocultar el menú cuando vayan hacía arriba?

    Gracias y un saludo.

    • Jhon Marreros Guzmán

      29 diciembre, 2020

      Hola, revisa la opción 2: https://decodecms.com/cabecera-fija-en-theme-wordpress/#C%C3%B3digo_CSS_para_fijar_la_cabecera

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Formulario de contacto con Ajax en WordPress

Desactivar las notificaciones de actualización en WordPress

Aprende a usar Taxonomías en WordPress

Agregar el campo de cantidad en la lista de productos de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados