Diferentes colores en menú de DIVI

por | Ene 26, 2018 | CSS, DIVI (Elegant Themes), Tutoriales

Hay veces, por el motivo que sea, que nos interesa que cada página lleve un color de fondo diferente en el menú, así como un color de letra también diferente.

En este tutorial os explicaré precisamente como podemos lograr esto.

Para empezar he partido de una página que tiene el menú transparente, con lo cual se funde con la foto de fondo.

Menus diferentes colores DIVI

Ahora, si nos vamos a otra página veremos que el color del menú sigue siendo transparente y las letras del mismo color, pero en este caso me interesa cambiar el color de ambos. Para ello accedemos a la siguiente opción:

Menu1 DIVI

Una vez pulsamos en dicha opción, deberemos colocar el siguiente código en el apartado de CSS para cambiar el color de fondo del menú:

header#main-header {background-color: #0e74b2;}

Menu3 DIVI

Como vemos, ya se ha cambiado el color de fondo:

Menu2 DIVI

Ahora veremos como cambiar el color de las letras.

En este caso habría que incluir en el mismo apartado el siguiente código:

#top-menu li a {color: black;}

En este caso he utilizado el color negro, pero se puede poner, obviamente el que queramos.

 

Menu4 DIVI
Menu5 DIVI

Si además queréis incluir un color diferente cuando pasais el ratón por lo alto (hover), debéis también incluir este código:

#top-menu-nav #top-menu a:hover, #mobile_menu_slide a:hover {color: yellow !important;}

Lo dicho, lo de yellow es un ejemplo.

Bueno, como siempre espero que este minitutorial os haya sido de utilidad y en tal caso compartáis y comentéis que os ha parecido.

Share This
A %d blogueros les gusta esto: