En este estilo de menú, agregaremos una línea que parece crecer de izquierda a derecha directamente debajo del elemento del menú sobre el que se pasa el cursor. También establecerá una línea estática directamente debajo del enlace de la página activa.

linea menu divi

Este es un efecto muy agradable que puede funcionar bien en prácticamente cualquier tipo de sitio, además de editar el código de este estilo para cambiar el color y el ancho de línea es bastante fácil para cualquier nivel de usuario.

Haz clic abajo para ver el video demostración:

 

como Añadir una linea en menu divi
Es un efecto de desplazamiento bastante popular que se ve en muchas páginas web.
Creo que es la sutileza lo que lo hace tan versátil, y que se puede usar en cualquier diseño web que se desee.
Aquí puedes ver si quieres ver más opciones de cómo personalizar el menú 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 DE LINEA ***/
 height: 3px; /*** GROSOR DE LINEA ***/
 -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%;
}

 

 

mejorar la velocidad de carga web

Optimiza la velocidad de tu página web. Mejorará tu posicionamiento y SEO.

En sólo 5 minutos y sin necesidad de saber de códigos. Observa este video demostrativo.

Solicitud enviada

Share This
Ir al contenido