Archived topic

Underline above and below

1 reply · Started by powerwebdomain on March 2, 2019

Viewing posts 1–2 of 2

March 2, 2019 at 8:03 pm #826977

Hello

I am using this code:
https://docs.generatepress.com/article/adding-menu-hover-animation/

It works great.

But I also want to havee the menu item line above ( 2 lines, one above and the other below the item)
How could it be possible?

Thanks.

March 3, 2019 at 4:55 am #827201

Hi there,

try this:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after, 
    .main-navigation .menu > .menu-item > a::before {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;

        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
     .main-navigation .menu > .menu-item > a::after {
         bottom: 0; /* Adjust bottom bar v.pos */
     }
     .main-navigation .menu > .menu-item > a::before {
         top: 0; /* adjust top bar v.pos */
     }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after,
    .main-navigation .menu > .menu-item.current-menu-item > a::before,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::before,
    .main-navigation .menu > .menu-item > a:hover::before {
        width: 50%;
    }
}

This archived topic is closed to new replies.

Start building better websites today.