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.
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).
¿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 771 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.
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. 😉
