• 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

Limitar el ancho de cabecera de Genesis Sample

Aprende en este tutorial cómo limitar la anchura de la cabecera de Genesis Sample mediante código.

La cabecera de Genesis Sample, por defecto, ocupa todo el ancho de la pantalla. Es decir, que el logotipo ocupará siempre la esquina izquierda y el menú la esquina derecha.

cabecera ancho completo Genesis Sample
Ejemplo de cabecera de Genesis Sample ocupando todo el ancho

Un suscriptor me comentó que le gustaría poder fijar un límite a la anchura, para que en pantallas de mayor resolución los elementos de la cabecera quedarán centrados.

Ejemplo de cabecera de Genesis Sample con un ancho limitado

¿A ti también te interesa?

Pues aquí tienes los pasas para conseguirlo en Genesis Sample (≥ 3.0):

Snippet para limitar el ancho de la cabecera en Genesis Sample

Añade este código al final del fichero style.css:

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

Con este simple cambio limitas el ancho de la cabecera a 1200px, pero puedes ajustarlo a tus preferencias.

También eliminas las sombra (box-shadow) para que toda cabecera tenga un color uniforme.

Conclusiones

Ahora ya sabes cómo limitar el ancho de la cabecera de Genesis Sample con un sencillo snippet.

¿Alguna duda? Te leo en los comentarios.

Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉

Cabecera CSS Genesis Framework Menú

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?