hasher22 Posted November 24, 2021 Share Posted November 24, 2021 (edited) Site URL: https://onyxhive.com.au/cakes Hey Guys, Two things I am trying to make the animation of my underline to just underline the word only not the whole box on a vertical list. This is my code: //Subcategory Underline Animation .category-item::after { content: ''; background: #fff; //color height: 2px; //thickness width: 0; display: block; padding-top: 0px !important; transition: width 0.2s; } .category-item:hover::after { display: block; width: 100%; } But when I add this code: .category-item { display: inline-block; } It underlines the words only which I wanted but now the subcategories are in a horizontal list, I need to keep it vertical. I can't find a solution How do I make the underline animation underline the word only and not the full box? How do I make the underline closer to the word? I feel the underline is way too separated from the word, I would like it at least 2-3px closer to the word Thanks Edited November 24, 2021 by hasher22 Link to comment
Beyondspace Posted November 26, 2021 Share Posted November 26, 2021 On 11/24/2021 at 8:15 PM, hasher22 said: Site URL: https://onyxhive.com.au/cakes Hey Guys, Two things I am trying to make the animation of my underline to just underline the word only not the whole box on a vertical list. This is my code: //Subcategory Underline Animation .category-item::after { content: ''; background: #fff; //color height: 2px; //thickness width: 0; display: block; padding-top: 0px !important; transition: width 0.2s; } .category-item:hover::after { display: block; width: 100%; } But when I add this code: .category-item { display: inline-block; } It underlines the words only which I wanted but now the subcategories are in a horizontal list, I need to keep it vertical. I can't find a solution How do I make the underline animation underline the word only and not the full box? How do I make the underline closer to the word? I feel the underline is way too separated from the word, I would like it at least 2-3px closer to the word Thanks Here is the testing result in my own It is the desired result you want to achieve? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted November 26, 2021 Share Posted November 26, 2021 Try adding to Home > Design > Custom Css /*Setting the underline for sub nav*/ .header-nav-folder-content .header-nav-folder-item a { display: inline-block; } .header-nav-folder-content .header-nav-folder-item a:after { content: ""; background: #fff; height: 1px; width: 0; display: block; transition: width 0.2s; margin: 0 auto; } .header-nav-folder-content .header-nav-folder-item:hover a { background: transparent !important; color: #fff !important; } .header-nav-folder-content .header-nav-folder-item:hover a:after { width: 100% !important; } /*Setting the underline for sub nav - end*/ Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
hasher22 Posted November 27, 2021 Author Share Posted November 27, 2021 (edited) On 11/26/2021 at 4:55 PM, bangank36 said: Let me know how it works on your site Hi! Thanks for the tinkering! I wanted the underline to be with the subcategories on the left, not the drop down menu. Edit: I half fixed it, its now going to 55% of the width not 100%. But would be nice to have it the width of each text Edited November 27, 2021 by hasher22 Link to comment
Beyondspace Posted November 27, 2021 Share Posted November 27, 2021 43 minutes ago, hasher22 said: Hi! Thanks for the tinkering! I wanted the underline to be with the subcategories on the left, not the drop down menu. Edit: I half fixed it, its now going to 55% of the width not 100%. But would be nice to have it the width of each text Try .category-item::after { content: none; } .category-item a { display: inline-block !important; } .category-item a::after { content: ""; background: #fff; height: 2px; width: 0; padding-top: 0px !important; transition: width 0.2s; display: block; position: absolute; margin: 0 auto; } .category-item a:hover:after { width: 100% !important; } Hope it helps you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted November 27, 2021 Share Posted November 27, 2021 My testing result BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
hasher22 Posted November 28, 2021 Author Share Posted November 28, 2021 10 hours ago, bangank36 said: My testing result THANK YOU!! IT WORKED!!!! Thank again for your hard work and tinkering for the community! 🙂 Beyondspace 1 Link to comment
Iwan Posted April 6, 2022 Share Posted April 6, 2022 Hi @bangank36, I hope you're willing to help? On my homepage ,main title I'd like to animate one of the words, is this possible? Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 On 4/6/2022 at 7:57 PM, Iwan said: I hope you're willing to help? On my homepage ,main title I'd like to animate one of the words, is this possible? Can you share link to homepage? 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
Iwan Posted April 10, 2022 Share Posted April 10, 2022 Hi there, @tuanphan I inserted a code to remove footer navigation underlines...but now I want to apply colour change on hover? Please can you help? Link to comment
tuanphan Posted April 11, 2022 Share Posted April 11, 2022 12 hours ago, Iwan said: Hi there, @tuanphan I inserted a code to remove footer navigation underlines...but now I want to apply colour change on hover? Please can you help? Add to Design > Custom CSS footer.sections a:hover { color: #f1f !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment