Main menu – change color on rollover

Hello there,

In order to override the default styling of the main menu on hover state, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

#mainnav ul li a:hover{
  color: #fff;
}

Regards,
Kharis

Hi, I used those lines in my child theme style.css, but the header links continue to change to blue. There will be some redundancy in my css? .. I’ll show you the contents of my child theme css:

/* FONDO DE LA ZONA DE WIDGETS */
.footer-widgets {
padding: 95px 0;
background-color: #252525;
background: url(https://www.villaroxana.com/web2016/wp-content/uploads/2016/08/fondo_foot_widgets.png) repeat 0 0;
}

/* POSICIóN MENU PRINCIPAL – “margin” define el espacio del margen derecho con respecto al contenido en este orden: margen sup, margen der, margen inf, margen izq */
#mainnav {
display: block;
float: right;
margin: 20px 50px 0 30px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

/* COLOR BLANCO EN HOVER Y EFECTO SUBRAYADO EN MENU PRINCIPAL */
#mainnav ul li a:hover {
color: #fff;
text-decoration: underline;
}

/* ELIMINAR TíTULO POR DEFECTO EN LA HOME PAGE */
.home .entry-header{
display: none;
}

/* TAMA?O TíTULOS EN CONTENIDOS */
.hentry .title-post {
font-size: 28px;
font-weight: 600;
line-height: normal;
padding-bottom: 10px;
margin: 0;
}

/* ALTURA ZONA DE WIDGETS FOOTER */
.footer-widgets {
padding: 20px 0;
background-color: #252525;
}

/* ALINEAR SOCIAL ICONS DEL WIDGET A LA IZQUIERDA O A LA DERECHA */
.social-menu-widget {
float: right;
}

Hello there,

Please try to enable the highest priority by adding an !important declaration. Your code will look like this:

/* COLOR BLANCO EN HOVER Y EFECTO SUBRAYADO EN MENU PRINCIPAL */
#mainnav ul li a:hover{
   color: #fff !important;
   text-decoration: underline;
}

Regards,
Kharis

It works!!! thanks ??