• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Conseguir una cabecera fija y de ancho completo en Agentpress Pro

Descubre cómo hacer que la cabecera del child theme de Genesis Agentpress Pro sea fija y ocupe todo el ancho de página mediante código. 

Por qué incluir un header fijo

La mayoría de los Genesis child themes de StudioPress cuentan con una cabecera fija, pero Agentpress Pro no es uno de ellos.

Sin embargo, mantener el header de la web siempre visible mejora la experiencia de usuario, ya que permite a las visitas acceder al menú en todo momento. 

¿Quieres que se suscriba? ¿Prefieres que resuelva el carrito de la compra? ¿Te interesa que se ponga en contacto?

Da igual cuál sea el objetivo principal de la web. Tener la cabecera a mano aumentará la conversión de la página.

Y si quieres, también puedes conseguir que el header ocupe todo el ancho de página realizando ciertos cambios de CSS.

Instrucciones para fijar la cabecera de Agentpress Pro

Si deseas el mismo resultado que ves en el vídeo superior, usa el área de widgets del header para colocar el menú principal.

1. Modifica el fichero style.css

Sustituye este snippet en el apartado Site Header:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Con este paso fijas y redimensionas la cabecera a ancho completo, además de igualar el color del título.

2. Inserta un espacio

Al hacer fijo el header, necesitas que añadir espacio debajo para que el contenido no quede tapado por ella.

Para conseguirlo, sustituye:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

3. Asigna estilos por tamaño de pantalla

Ahora tienes que ajustar los estilos para las distintas media queries.

Para las de pantallas de máximo 1023 píxeles, añade el siguiente código debajo de «@media only screen and (max-width: 1023px) {«

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

4. Toque final

Por último, si quieres que quede perfecto, puedes eliminar las líneas laterales de los items del menú.

Para ello, comenta la línea 1326 del apartado Site Header Navigation de forma que quede así:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

¡Ya está!

Conclusiones

Puedes conseguir una cabecera fija y de ancho completo en Agentpress Pro ajustando estos parámetros de CSS.

Échale un vistazo a este tutorial si solo te interesa que el header de Agentpress Pro ocupe todo el ancho de página sin quedarse fija al hacer scroll. 

¿Tienes alguna pregunta o quieres darme una sugerencia para próximos snippets? Déjala en los comentarios.

Ventajas de ser suscriptor.😉

Agentpress Pro Cabecera CSS

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?