Descubre cómo modificar el color de los elementos del menú superior en el child theme de Genesis Showcase Pro mediante código.
Hace muy poco, Petter, uno de nuestros suscriptores, me pidió lo siguiente:
Por favor Nahuai, ¿podrías hacer un código para cambiar el color de las palabras en el menú?
Como cada tema tiene sus peculiaridades, le pregunté si lo quería aplicado a alguna plantilla en particular.
Sería fantástico que se puede hacer para el child theme Showcase Pro
Mil gracias, espero también le sirva a toda la comunidad mi petición.
Si es así, estaré más que feliz.
Así que me puse manos a la obra. 😉
Para alterar el color de las letras en el menú de Showcase Pro solo necesitas realizar ciertos cambios de CSS.
![cambiar color menu sin imagen showcase pro](https://codigogenesis.com/genesis/2018/09/cambiar-color-menu-sin-imagen-showcase-pro.jpg)
(página sin imagen de cabecera)
Vamos allá:
Snippets para personalizar el color del menú superior en Showcase Pro
El child theme Showcase Pro cuenta con 2 particularidades:
- Algunas páginas (como la home) permiten añadir una imagen a la cabecera.
- También te da la oportunidad de destacar uno de los items del menú en forma de botón.
Dependiendo del proyecto, es posible que no necesites el segundo fragmento de este tutorial. Fíjate en bien en las utilidades del mismo y tenlo en cuenta para no sobrecargar el código en vano.
1. Cambia el color del menú principal
Este paso es esencial es esencial. Sustituye este bloque en el apartado Navigation o al final del fichero style.css:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este fragmento aplicas el cambio de color a los elementos del menú principal (no submenú) siempre y cuando se encuentre en una página sin imagen en la cabecera.
Por supuesto, puedes sustituir #ea9b4e por el color que desees.
2. Modifica botones, cabeceras con imágenes y menús secundarios
La importancia de este paso dependerá de tu proyecto.
¿Quieres cambiar el color en cabeceras con imágenes, menús secundarios o botones que hayas añadido a algún elemento del menú?
Entonces, en la línea 1680 del style.css, sustituye:
Para ver este código y los otros 2045 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque cambias el color de los menús en todas las páginas (con o sin imagen), de los elementos destacados y submenús.
En este caso concreto he dejado en blanco los que salen sobre imágenes para que se vean bien, pero puedes sustituirlo por el que mejor te venga.
![cambiar color menu con imagen hoover showcase pro](https://codigogenesis.com/genesis/2018/09/cambiar-color-menu-con-imagen-hoover-showcase-pro-1.jpg)
(página con imagen de cabecera)
En cualquier caso, asegúrate de que se lean bien en todas las páginas que usen una cabecera con imagen.
Recuerda, el diseño no debe comprometer la usabilidad. 😉
Conclusiones
Ahora ya sabes cómo cambiar los colores de los distintos elementos del menú en el child theme de Genesis Showcase Pro.
Aunque este código está pensado para las peculiaridades de esta plantilla, puedes usarlo de guía para modificar otros temas de Genesis Framework.
¿Quieres cambiar de color los elementos del menú en otro child theme? ¿Te interesa que el color se pueda elegir desde el personalizador? Cuéntame qué necesitas para que prepare un tutorial a medida.
Ventajas de ser suscriptor. 😉