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, puedes identificarte o suscribirte.
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, puedes identificarte o suscribirte.
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, puedes identificarte o suscribirte.
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, puedes identificarte o suscribirte.
¡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.😉