Come creare un menu sottolineato (con effetto hover) in Divi

Oggi condividerò alcune righe di codice CSS per aggiungere al menu un piacevole effetto hover sottolineato al passaggio del mouse.

Il tuo menu è una delle prime cose che i visitatori vedono quando visitano il tuo sito web, quindi vuoi che abbia un certo stile, giusto? Ecco perché nel post di oggi condividerò alcune righe di codice CSS per aggiungere al menu un piacevole effetto hover sottolineato al passaggio del mouse.

menu sottolineato

#top-menu .current-menu-item a:before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1.0;
}

#top-menu li a:hover:before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1;
}

#top-menu li a:before {
content: ”;
position: absolute;
top: 10px;
left: 0;
background: #404040; /* Cambia colore */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}

Istruzioni

Tutto quello che devi fare è inserire questo codice in Divi > Opzioni tema > CSS personalizzato o nel file Style.css del tuo tema child. Inoltre puoi cambiare il colore della sottolineatura (sfondo: # 404040; / * Cambia il tuo colore qui * /)

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato.

Ti potrebbe anche interessare…