Jump to content

Active underline of navigation links on hover

Go to solution Solved by tuanphan,

Recommended Posts

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!

Screenshot_20200702-092754_Chrome.jpg

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Link to comment
  • Solution
On 7/2/2020 at 9:35 PM, Ahmed77 said:

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?

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 5 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.