Remove hover effect on one item in navigation bar

Hi there,

Still me and my small company store 😆

I'm pretty much done now, and I'm struggling with a little thing (well I hope it's little).

I successfully managed to replace the customer login text link in the main navigation into an svg icon, but when hovering it, there are two underlines appearing (see picture attached).

We do have a custom hover effect for the entire navigation, but it should be just one line (the other items are working just fine). 

So I would like to remove these underlines ONLY on the customer icon item.

Is there a way to do that without breaking to whole hover effect ?

Thanks !

Site URL : https://www.la-bise.fr/
Pages under dropdown menu are protected, but if needed, password is : labisestore

@Margaux try this in custom CSS:

a.user-accounts-text-link.header-nav-item:hover::after, .user-accounts-link.header-nav-item:hover::after {
	background: transparent;
}

17 hours ago, SaranyaDesigns said:

@Margaux try this in custom CSS:

a.user-accounts-text-link.header-nav-item:hover::after, .user-accounts-link.header-nav-item:hover::after {
	background: transparent;
}

 

Hi @SaranyaDesigns, thank you for this !

It works somehow, but there is some weird behavior happening (when the mouse leaves from hover the icon). I don't know if we can get rid of it ?

On 11/26/2023 at 1:41 AM, tuanphan said:

Try this CSS under

.header-nav-item.user-accounts-text-link::after, .header-actions.header-actions--right *:after {
    display: none !important;
}
.header-nav-item.user-accounts-text-link, div.user-accounts-link {
    border: none !important;
    text-decoration: none !important;
}

 

Thank you very much @tuanphan ! Works like a charm.