I am trying to customise my header on Squarespace 7.1: I have 2 folders item (parent) and a few children item for each in a Dropdown Menu (folder content). I have used a code to create an animated underline effect when I hover only the parent folder (not the folder content), but I would like that effect to stay active only on the parent folder when I hover the folder content.
When I hover the folder content, I'd like the folder parent animation to stay on hover too. Does that make sense?
Here is the custom CSS that I used for that section
/*Nav Item Animated Line when hover*/
nav a:hover {
background-size: 100% 2px !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% 2px !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;
}
/*Transparent dropdown background */
.header-nav-folder-content {
background: transparent !important;
a {
background: none !important;
}
}
/*Nav Folder Dropdown Fade In*/
.header-nav-folder-content {
transition: all 0.5s ease-in-out !important;
}
.header-nav-folder-content:hover {
transition: all 0.5s ease-in-out !important;
}
Question
TOMweb 7
Hi team!
I am trying to customise my header on Squarespace 7.1: I have 2 folders item (parent) and a few children item for each in a Dropdown Menu (folder content). I have used a code to create an animated underline effect when I hover only the parent folder (not the folder content), but I would like that effect to stay active only on the parent folder when I hover the folder content.
When I hover the folder content, I'd like the folder parent animation to stay on hover too. Does that make sense?
Here is the custom CSS that I used for that section
/*Nav Item Animated Line when hover*/
Edited by remia06nav a:hover {
background-size: 100% 2px !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% 2px !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;
}
/*Transparent dropdown background */
.header-nav-folder-content {
background: transparent !important;
a {
background: none !important;
}
}
/*Nav Folder Dropdown Fade In*/
.header-nav-folder-content {
transition: all 0.5s ease-in-out !important;
}
.header-nav-folder-content:hover {
transition: all 0.5s ease-in-out !important;
}
Privacy
Link to post
Top Posters For This Question
2
2
1
Popular Days
Oct 2
4
Oct 23
1
Top Posters For This Question
TOMweb 2 posts
tuanphan 2 posts
helloVlad 1 post
Popular Days
Oct 2 2020
4 posts
Oct 23 2020
1 post
4 answers to this question
Recommended Posts
Posted by tuanphan,
Working code solution.
Recommended by SpencerC
0 reactions
Go to this post
Create an account or sign in to comment
You need to be a member in order to leave a comment