06.80.46.86.18

Personnaliser le menu du thème DIVI avec une ligne croissante sous le menu demande quelques ajouts de CSS dans votre thème.

Présentation de la ligne croissante sous le menu DIVI

Dans ce style de menu, nous ajouterons une ligne qui semble croître de gauche à droite directement sous l’élément de menu survolé. Il définira également une ligne statique directement sous le lien de la page active.ce en dessous

Divi menu souligne hover

C’est un très bel effet qui peut bien fonctionner sur à peu près n’importe quel type de site, et éditer le code de ce style pour changer la couleur et la largeur de la ligne est assez facile pour n’importe quel utilisateur de niveau. C’est un effet de survol assez populaire que j’ai vu sur les sites depuis des années. Je pense que c’est sa subtilité qui le rend si polyvalent, il peut être utilisé sur un site immobilier ainsi que sur le site d’un musicien et tout ce qui se trouve entre les deux.

Code CSS à ajouter pour créer cet effet à votre site

Ajoutez le code suivant à votre feuille de style enfant OU aux options du thème Divi > général > CSS personnalisée :

#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; /*** Couleur de la logne ***/
 height: 3px; /*** Epaisseur de la ligne ***/
 -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%;
}

Pour personnaliser les menu du thème DIVI, il est nécessaire de réaliser un code en CSS faisant référence au top-menu

Si vous souhaitez personnaliser votre menu, vous pouvez me contacter

Pin It on Pinterest

Share This