TOMweb Posted October 2, 2020 Share Posted October 2, 2020 (edited) 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*/ 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; } Edited October 2, 2020 by remia06 Privacy Link to comment
tuanphan Posted October 2, 2020 Share Posted October 2, 2020 What is access password? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Featured Comment tuanphan Posted October 2, 2020 Featured Comment Share Posted October 2, 2020 Add to Home > Design > Custom CSS /* Hover underline */ .header-nav-item.header-nav-item--folder:hover>a { background-size: 100% 2px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
TOMweb Posted October 2, 2020 Author Share Posted October 2, 2020 It works! You rock! Thank you so much ☺️ Link to comment
helloVlad Posted October 23, 2020 Share Posted October 23, 2020 Thanks for this, works perfectly. For Brine 7.0 its the following code: /* Hover underline */ .Header-nav-item.Header-nav-item--folder:hover > a { background-size: 100% 2px !important; } Link to comment
FluentStudios Posted March 17, 2023 Share Posted March 17, 2023 @helloVlad Does this still work for you in Brine 7.0? I can't get it to work, just trying to make the hover state of the dropdown folder nav underline. Thanks. Link to comment
tuanphan Posted March 19, 2023 Share Posted March 19, 2023 On 3/17/2023 at 11:18 PM, FluentStudios said: @helloVlad Does this still work for you in Brine 7.0? I can't get it to work, just trying to make the hover state of the dropdown folder nav underline. Thanks. If you share your site url, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
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