• 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

Cambiar el color del menú «responsive» en Executive Pro

Descubre en este tutorial cómo modificar el color del menú para móviles en el child theme de Genesis Executive Pro mediante código.

Hace muy poco, Luis, uno de los suscriptores de Código Genesis, me preguntó cómo podía cambiar el color del menú de Executive Pro que se muestra en dispositivos móviles, ya que no daba con el selector de CSS encargado del mismo.

Color por defecto del menú responsive de Executive Pro.

En su caso, quería cambiar el azul claro que viene por defecto por el negro para que tuviera mejor contraste, (lo cual me parece un acierto).

Color personalizado del menú responsive de Executive Pro.

¿Lo mejor de todo?

Que Executive Pro utiliza el mismo selector que muchos otros child themes de Genesis de StudioPress, así que puedes adaptar este tutorial para multitud de temas.

¿Tú también quieres alterar el color de las letras en el menú de esta plantilla? Solo necesitas realizar ciertos cambios de CSS.

Snippet para personalizar el color del menú responsive en Executive Pro

Sustituye este bloque en el apartado de media queries (@media only screen and (max-width: 800px)) del style.css:

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

Con este fragmento aplicas el cambio de color a los elementos del menú responsive (el icono y el texto) siempre y cuando se encuentre en una página sin imagen en la cabecera.

Color personalizado del menú responsive de Executive Pro.

Por supuesto, puedes sustituir #000 (negro) por el tono que desees.

Conclusiones

Ahora ya sabes cómo cambiar los colores del menú responsive en el child theme de Genesis Executive Pro.

Aunque este código está pensado para una plantilla concreta, puedes usarlo de guía para modificar otros temas de Genesis Framework, especialmente de StudioPress.

¡Ah! Y si tienes alguna pregunta sobre el tutorial, déjala en los comentarios.

Ventajas de ser suscriptor. 😉

Cabecera CSS Executive Pro 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?