3 Estilos CSS muy molones para el menú de Divi

 

En primer lugar, aclaremos algo importante.

Estos efectos funcionan con el formato de cabecera por defecto, el que viene cuando instalas Divi, así que si nunca lo has tocado no te preocupes de nada.

Y si cambiaste el estilo por defecto por algún otro, deberás volver a establecerlo para visualizar estos efectos.

Dicho esto, vamos allá.

 

Efecto número 1

 

Parece que queda bastante bien ¿No?

Ten en cuenta que quizás conviene utilizar un color vivo y distinto a los de su alrededor en este efecto, así resaltará mucho mejor.

 

Más sencillo imposible, sólo tienes que copiar este código en tu style.css o en el panel de css adicional en las opciones generales de Divi.

 

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

 

Efecto número 2

 

Comprobarás que cambiar el color dentro del código es muy sencillo.

 

Este efecto, además de añadir un bloque cuando posamos el ratón encima, añade un recuadro alrededor del nombre de la página activa.

 

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

Igualmente, es muy sencillo cambiar el color y el grosor de nuestro efecto.

 

Efecto número 3

 

En segundo lugar tenemos este efecto, muy interesante también, simula botones en las palabras de nuestro menú, dándole una apariencia genial.

Como resultado tenemos un efecto que quedará especialmente bien si en tu web se pueden encontrar como parte de su estética más figuras geométricas.

 

.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;
}

 

Igualmente, es muy sencillo cambiar el color y el grosor de nuestro efecto.

Como conclusión podemos volver a comprobar lo fácil que es, en muchas ocasiones, aplicar buenos efectos CSS a nuestro DIVI.

 

Finalmente tenemos tres buenos efectos para el menú de Divi fáciles de insertar.

Sin embargo, si tenemos colocados en nuestro menú algún botón quizás ambos efectos se pisen el uno al otro y no quede bien, cuidado con esto.

 

¿Te han gustado los efectos?

¿Vas a utilizar alguno?

¡Nos vemos en los comentarios!

 

 

Fuente

 

2 comentarios en “3 Estilos CSS muy molones para el menú de Divi

Deja un comentario

DISEÑA EN WORDPRESS DE MANERA PROFESIONAL

CURSO POR EMAIL GRATUITO [EDICIÓN I]

¡Perfecto!

DISEÑA  EN WORDPRESS DE MANERA PROFESIONAL

CURSO POR EMAIL GRATUITO [EDICIÓN I]

¡Perfecto!

Échame un cable

¿Compartes mi artículo con tus amigos?