Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Animated Underline


AA95

Question

Site URL: http://www.andreaaronica.com

Hello everyone,

what I'm trying to do is a animated underline hover effect under the pages on my header (squarespace 7.1).

The password for my website is: almostready

I managed to use this code in my CSS:

nav a::after {

  border-bottom: 1.5px solid #000000;

  content: '';

  display: block;

  position: relative;

  top: 0.5px; /* Change the vertical position of the underline */

  transition: width 0.35s;

  width: 0%;

}

nav a:hover::after,

nav .current-menu-item a::after {

  width: 100%;

}

And it works just fine even though it takes the page titles slightly up. Not a big deal (But if I can fix also that it would be great). The real problem is with the mobile version. The underline is too wide and it doesn't underline just the text but also the social buttons and the button. 

The code I used for mobile is:

@media (max-width: 979px){

    nav a::after {

          top: 0px; /* Change the vertical position of the underline */

    }

}

but it does absolutely nothing, actually it messes up the desktop version. I really tried every kind of css code I could find but I'm totally stuck. Any help would be appreciated. Thank you in advance.

Link to comment

Recommended Posts

  • 0
On 10/3/2020 at 2:47 PM, inunzi said:

I tested this code on my site, and it doesn't show a line under the social icons on desktop nor on mobile. You can also customize the transition speed, the thickness of the line, and I think you can also change the color of the line too. Copy and paste the code below in the custom css section, located the the design page. 



// Stretchy Navigation Line - v2 //

.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

hi, i just used this code snipped for my own site, works almost perfectly except sometimes when my cursor leaves the navigation link, as the line shrinks it doesnt shink all the way to the end, there is a tiny dot that remains and it disappears only after some time when I hover other links back and forth. Any idea how to fix it? My current cite is gallerymilmar.com, the "publications" link currently experiences that black dot issue most of the time.

Edited by Kailron
Link to comment
  • 0
2 hours ago, Kailron said:

hi, i just used this code snipped for my own site, works almost perfectly except sometimes when my cursor leaves the navigation link, as the line shrinks it doesnt shink all the way to the end, there is a tiny dot that remains and it disappears only after some time when I hover other links back and forth. Any idea how to fix it? My current cite is gallerymilmar.com, the "publications" link currently experiences that black dot issue most of the time.

I see fine here. Did you solve?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 10/3/2020 at 10:47 PM, inunzi said:

I tested this code on my site, and it doesn't show a line under the social icons on desktop nor on mobile. You can also customize the transition speed, the thickness of the line, and I think you can also change the color of the line too. Copy and paste the code below in the custom css section, located the the design page. 

// Stretchy Navigation Line - v2 //

.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

This works great on my site for the header nav. But How do you do this to the footer and all the other links? Can someone help with this please?

Link to comment
  • 0
15 hours ago, Nir said:

Hi all, resurrecting this thread :) 

The animated underline doesn't work on a navigation link that has a dropdown, also it makes it so the dropdown doesn't drop. Wondering if anyone knows what I can add to the code to make sure it works for links with drop-down menus? 

site is: https://cod-cobalt-29w6.squarespace.com/

pw: quiet

 

Which code did you use?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hi @tuanphan (or any others), please could you advise on how to adapt the following code so that it applies to text links and so that the underline only animates under the linked text, not under the whole block? Do I need to change 'display: block;' to something else?

Would be super grateful for a solution!

#page a::after {
  content: '';
  background: #5050a0; //color
  display: block;
  height: 10px; //thickness
  width: 0;
  margin-top: 2px !important;
  transition: width 0.5s; //animation speed
  margin: 20 auto;
}

#page a:hover::after {
  width: 100%;
}

#page a a {
    background-image: none !important;
}

Link to comment
  • 0
On 11/19/2021 at 12:05 AM, thomaswbarnett said:

Hi @tuanphan (or any others), please could you advise on how to adapt the following code so that it applies to text links and so that the underline only animates under the linked text, not under the whole block? Do I need to change 'display: block;' to something else?

Would be super grateful for a solution!

#page a::after {
  content: '';
  background: #5050a0; //color
  display: block;
  height: 10px; //thickness
  width: 0;
  margin-top: 2px !important;
  transition: width 0.5s; //animation speed
  margin: 20 auto;
}

#page a:hover::after {
  width: 100%;
}

#page a a {
    background-image: none !important;
}

Can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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...