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 * /)

Ti potrebbe anche interessare…

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Ordina il tuo sito web e ricevilo in 5 giorni

WordPress Divi Designer

Realizziamo siti web moderni e professionali con Divi, il tema WordPress e builder visivo più potente al mondo.

Negozio dei Layout

I layout Divi sono nati per donare un look pulito e professionale e farti risparmiare tempo nella creazione del tuo sito Web.

Travel Blogger Child Tema
Panificio Divi Child Tema
Carrozziere Divi Child Tema