How to highlight an active menu item when hovering over it?

E

evgenyforever2019-01-03 08:16:00

css

evgenyforever, 2019-01-03 08:16:00

Tell me how to do it so that the elements do not move and the blue bar is under the category, and not above it.
There is a code, please add. (to make it look like the picture)
snippet
The component itself is called global-nav-indicator-bar

}
 .global-nav-indicator-bar {
    border-top: 0px solid #5787f4;
    bottom: 0px;
    display: block;
    left: 0px;
    transition: border-width 0.300s linear 0s;
    width: 100%;
}
#mainMenu > li:hover *:hover .global-nav-indicator-bar {
    border-top-width: 5px;
}
.global-nav-indicator-bar {
    display: block;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Rustam Bainazarov, 2019-01-03
@evgenyforever

Box-shadow, not border-top:
snippet