• Ir a navegación principal
  • Ir al contenido principal
Código Genesis

Código Genesis

Tutoriales para Genesis Framework y WordPress

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

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 1271 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 - CEO

Desarrollador web especializado en WordPress y Genesis Framework. Me encanta contribuir a la comunidad de WordPress y Genesis dando charlas en WordCamps, organizando eventos, traduciendo temas y plugins… más sobre mí.

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

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

¿Has olvidado tu contraseña?