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

Autore del post

Divi Design Studio

Divi Design Studio

Siamo un team giovane con grande esperienza nella progettazione e nello sviluppo di siti web. Progettiamo siti WordPress da oltre 20 anni e siamo esperti nella creazione di contenuti digitali, branding e web design. Appassionati del tema Divi, abbiamo lanciato Divi Design Studio per offrire una vasta libreria di layout dal design moderno e professionale. La collezione di Layout Divi è in continua fase di aggiornamento. Aggiungiamo più di 20 nuovi prodotti al mese!
Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato.

Ti potrebbe anche interessare…

Header Divi sfondo

3 Layout Divi in regalo!

Per tutto il mese di ottobre, ti regaliamo un pacchetto che include 3 layout Divi da scaricare gratuitamente.

Grazie!