Active underline of navigation links on hover

Site URL: https://www.thirstforallah.com

Hey all,

I recently purchased a plugin from squarestud.io and have been having trouble getting support regarding a plugin that causes my navigation links in the header to be underlined upon hover. See Nav Header One - CLICK HERE. This is currently only working on safari and does not work in chrome on my mac, but does work on my mobile in chrome. Any particular insight into what could be changed in the coding that could solve this problem? 

//Navigation underscore - squarestud.io//

nav a:hover {
    background-size: 100% 0.5px !important;
}
nav a {
  padding-bottom: 6px;
  overflow: visible !important;
background-repeat: no-repeat !important;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
    background-size: 0% 0.5px !important;
    background-position: 0% 100% !important;
    white-space: initial;
transition: all ease-in-out 500ms !important;
-ms-transition: all ease-in-out 500ms !important;
-moz-transition: all ease-in-out 500ms !important;
-webkit-transition: all ease-in-out 500ms !important;
}
//End navigation underscore//

Additionally, if you are feeling particularly generous, on mobile the underline surpasses the boundary of the link and goes across the whole screen. See below. Really grateful for the help i've received thus far on this forum. Thanks for your help!

I see underline hover works here? Dell laptop/Chrome

With mobile, add this to Home > Design > Custom CSS

.header-menu-nav-item a {
    display: inline-block;
}

21 minutes ago, tuanphan said:

I see underline hover works here? Dell laptop/Chrome

With mobile, add this to Home > Design > Custom CSS

.header-menu-nav-item a {
    display: inline-block;
}

 

I must say @tuanphan you are a legend. Works great for mobile. I am unsure why the hover isn't working in my chrome browser? Do you think my cache/cookies need cleared or something?

On 7/5/2020 at 8:33 AM, tuanphan said:

Hi. Sorry for delay. My laptop was broken. Have you solved it yet?

I had to clear my cache/update to the newest version of chrome and it started showing up! Thanks!

Hi, do you know how to keep the underline decoration when the page navigation is active ?

10 hours ago, diaph said:

Hi, do you know how to keep the underline decoration when the page navigation is active ?

Each template needs different code. Can you share link to your site? We can check easier

Hey @tuanphan, it’s a York template.

the code above is already working well, just looking for the ability to keep the underline visible when page is active.

Thanks !

On 1/24/2021 at 12:03 AM, diaph said:

Hey @tuanphan, it’s a York template.

the code above is already working well, just looking for the ability to keep the underline visible when page is active.

Thanks !

Add to Design > Custom CSS

div.active * {
    text-decoration: underline;
}

Thank you both! @tuanphan How can I remove underlining from the site's title/logo?

21 hours ago, HSL said:

Thank you both! @tuanphan How can I remove underlining from the site's title/logo?

Hi. York template or which site url?

Thank you @tuanphan for your kind and prompt response. I am using PULASKI template. 

18 hours ago, HSL said:

Thank you @tuanphan for your kind and prompt response. I am using PULASKI template. 

Hi. Can you share link to your site url? We can help easier

If you can't share public, you can send me a message

On 6/7/2021 at 12:33 AM, HSL said:

Thank you @tuanphan for your kind and prompt response. I am using PULASKI template. 

 Add to Design > Custom CSS

/* Logo underline */
.header-title-logo a {
    border: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
/* Header button underline */
a.btn {
    background-image: none !important;
}
/* Summary image underline */
a.summary-thumbnail-container.sqs-gallery-image-container {
    background-image: none !important;
}