Hover effect underline menu

[kinelablier]

Hi! I found a code for this hover effect.
But now everything (also logo and social media icons) underline. What is the solution?

    .main-navigation ul.menu > li > a { 
    a:hover {
        color: #78A0B4;
        text-decoration: none;
    }
    a {
        transition: color 0.1s, background-color 0.1s;
    }
    a {
        position: relative;
        display: block;
        transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
        color: #78A0B4;
    }
    a::before {
        content: '';
        display: block;
        position: absolute;
        bottom: -3px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #78A0B4;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s,transform 0.2s ease-out;
    }
    a:active::before {
        background-color: #000;
    }
    a:hover::before, a:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
    }
          }

[awan]

Hi,

I make a little revision of the code above, please try to use this code instead:

.main-navigation ul.menu > li > a {
    transition: color 0.1s, background-color 0.1s;
    position: relative;
    display: block;
    transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
    color: #78A0B4;
}
.main-navigation ul.menu > li > a:hover {
    color: #78A0B4;
    text-decoration: none;
}

.main-navigation ul.menu > li > a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #78A0B4;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.2s ease-out;
}

.main-navigation ul.menu > li > a:active::before {
    background-color: #000;
}

.main-navigation ul.menu > li > a:hover::before, 
.main-navigation ul.menu > li > a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}

Regards,

[sonomusic]

Hello!
I’ve tried this code and it works perfectly. It’s just that on mobile it works but it doesn’t allow the item to be clicked (and therefore auto close menu and load the addressed page)
How can I fix this?

Home | SONO for Artists

[kharisblank]

Hi,

Can you take a screenshot or screen recording to the isssue you’re getting to directly point me the location? Share it here in your reply, so I can help you in a better way.

Regards,
Kharis
aThemes Support

[sonomusic]

Hello! Thank you for your response.
https://drive.google.com/file/d/1AqkmGkDKtR1pAc0CV_qES8kdD69cmCO3/view?usp=sharing

Here you’ll find the screen recording of the issue.
When I add the code to make menu items underlined when hovered, it works great on pc, but not on mobile. It just doesn’t do anything when clicking.

Thank you.

[kharisblank]

Hi,

I checked the menu links with my phone and they are properly working.

Here is my screen recording when testing:

https://drive.google.com/file/d/1hOSRaQW7_sF7i323Z--3OSGysEbiF1vz/view?usp=sharing

Regards,
Kharis
aThemes Support