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.
Question
AA95
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
Top Posters For This Question
3
12
15
1
Popular Days
Oct 3
8
Oct 6
7
Oct 5
5
Oct 4
4
Top Posters For This Question
tuanphan 3 posts
inunzi 12 posts
AA95 15 posts
revisor 1 post
Popular Days
Oct 3 2020
8 posts
Oct 6 2020
7 posts
Oct 5 2020
5 posts
Oct 4 2020
4 posts
Popular Posts
inunzi
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 a
inunzi
Are you trying to look for a new hover effect code, or keep this one and just tweak it? Because I really love that give affect you have. Oh and btw, the food on your website looks super good.😁
AA95
I just tried it and it works!!! 🙂 Super excited for this. Just a few things I need to change. I'd love to make the underline appear from left to right. I'd also love that the underline stays when you
Posted Images
33 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment