Lijn onder Divi menu bij hover

Lijn onder Divi menu item (hover effect)

Een lijn onder een Divi menu item toevoegen doe je door eenvoudig CSS toe te voegen aan de Thema Opties in je dashboard. Wanneer je met de muis over een menu-item heen gaat, verschijnt er een lijn onder dit item. De lijn blijft ook staan onder het geselecteerde menu-item.

Je kunt diverse CSS toevoegen om dit effect te krijgen. Hieronder 2 voorbeelden.

Voor

Na

Menu met CSS - Lijn onder Divi menu bij hover

Werkwijze

Optie 1 – Korte CSS

Met deze korte CSS pas je een eenvoudige onderlijn toe.

/* Onderlijn geselecteerde menu */
#top-menu li a:hover {
text-decoration: underline;
}
/* Einde */

Optie 2 – Uitgebreide CSS

Met deze uitgebreidere CSS kun je een unieke stijl toevoegen. Je kunt bijvoorbeeld de lijndikte en lijnkleur bepalen.

/* Onderlijn geselecteerde menu */
#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: #212F3A; /*** Kleur van de lijn ***/
 height: 1px; /*** Dikte van de lijn ***/
 -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%;
}
/* Einde */

Waar plaats je de CSS code

Je plaatst de CSS in Dashboard – Divi – Thema Opties – Aangepaste CSS

Koop Page Builder Everywhere