Tutorial Divi: Cómo cambiar el estilo de los menús de tu sitio web

En este video tutorial te vamos a mostrar cómo personalizar, y cambiar el estilo de los menús de tu sitio web, de una manera más elegante…

…OJO: por favor ten presente que este video tutorial está enfocado en el tema Divi, por lo tanto, si utilizas el código de los estilos CSS en un tema/theme diferente, la más seguro es que no te funcionará de la misma forma como te lo mostramos en el video.

Si deseas obtener más información sobre el “Theme Divi”, Clic Aquí para más detalles >>

Por otra parte, la herramienta para obtener los códigos de los colores se llama “ColorPick Eyedropper”.

Aquí te proporcionamos un video tutorial sobre esta herramienta, para que sepas donde obtenerla, y aprendas cómo seleccionar y obtener los códigos de los colores.

–

A continuación, te proporcionamos el código de los “Estilos CSS” que te mostramos en el video.

 .et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom: 15px;
}
#top-menu li {
 padding-right: 5px;
}
#et-top-navigation {
 padding: 20px 0 !important;
}
#top-menu li a {
 background: #C1B2AB; /*** CHANGES THE BACKGROUND COLOR ***/
 padding: 15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color: #fff !important;
}
#top-menu li a:hover {
 background: #559CAD !important; /*** CHANGES THE BACKGROUND COLOR ON HOVER ***/
}
#top-menu li.current-menu-item > a {
 background: #edc77b; /*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 content: none;
} 

–

¿Deseas ver los otros códigos de estilos CSS?

Si tu respuesta es Sí, entonces Clic Aquí para ir directamente al artículo de Elegant Themes.

El sitio web de Elegant Themes está en inglés, pero te puedes ayudar a traducirlo con el traductor de Google.

–

Si te pareció que esta información es útil, por favor compártela y déjanos tus comentarios. ¡Gracias!