penpen Posted December 2, 2020 Share Posted December 2, 2020 (edited) Site URL: https://www.studiosmpl.com is there a way to have the same hover effect (opacity change only) on the nav links as the text links? Edited December 2, 2020 by penpen Link to comment
tuanphan Posted December 5, 2020 Share Posted December 5, 2020 Add to Home > Design > Custom CSS div.header-nav-item a:hover { opacity: 0.5 !important; } OrangeKhan 1 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
penpen Posted December 7, 2020 Author Share Posted December 7, 2020 I did this: div.header-nav-item a:hover { opacity: 0.5 !important; transition: 0.01s !important; } But when you un-hover the transition is still slow, how do I fix? Link to comment
tuanphan Posted December 8, 2020 Share Posted December 8, 2020 div.header-nav-item a:hover { opacity: 0.5 !important; } div.header-nav-item a { transition: all 0.1s !important; } OrangeKhan and E-W 2 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
penpen Posted December 8, 2020 Author Share Posted December 8, 2020 Thank you that works! Link to comment
OrangeKhan Posted June 12, 2021 Share Posted June 12, 2021 On 12/5/2020 at 12:55 AM, tuanphan said: Add to Home > Design > Custom CSS div.header-nav-item a:hover { opacity: 0.5 !important; } Hey Tuaphan, It worked for me. Thank you so much man. You are like a fresh breath of air on the forum. I literally prayed for your happiness and progress. thanks again Link to comment
OrangeKhan Posted June 12, 2021 Share Posted June 12, 2021 Just to add more, how to make hover effect clorful, like if my navi bar titles are in black, when i bring mouse to it it should turn orange... my previous website has this feature but that is on 7.0, my new website (i am building now) is on 7.1 - so need that effect in this one.. The link is: www.abitorange.com Link to comment
tuanphan Posted June 14, 2021 Share Posted June 14, 2021 On 6/12/2021 at 9:58 PM, OrangeKhan said: Just to add more, how to make hover effect clorful, like if my navi bar titles are in black, when i bring mouse to it it should turn orange... my previous website has this feature but that is on 7.0, my new website (i am building now) is on 7.1 - so need that effect in this one.. The link is: www.abitorange.com Use this div.header-nav-item a { transition: all 0.1s !important; } div.header-nav-item a:hover { opacity: 0.5 !important; color: orange !important; } OrangeKhan 1 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
OrangeKhan Posted June 21, 2021 Share Posted June 21, 2021 On 6/13/2021 at 10:14 PM, tuanphan said: Use this div.header-nav-item a { transition: all 0.1s !important; } div.header-nav-item a:hover { opacity: 0.5 !important; color: orange !important; } Thank you so much. It worked brilliantly. Link to comment
tuanphan Posted July 11, 2021 Share Posted July 11, 2021 On 6/12/2021 at 9:58 PM, OrangeKhan said: Just to add more, how to make hover effect clorful, like if my navi bar titles are in black, when i bring mouse to it it should turn orange... my previous website has this feature but that is on 7.0, my new website (i am building now) is on 7.1 - so need that effect in this one.. The link is: www.abitorange.com Do you want to fix these? Site URL: https://www.abitorange.com/ 1. (Desktop – Header) Make menu items in the same line. And do you want balance all distance between social icons? 2. (Tablet/Mobile – Menu) Reduce spacing above Login 3. (Tablet – homepage) Text overlap 4. (Tablet – Footer) Remove white space between button – orange footer. Text in infor column overlap. https://www.abitorange.com/custom-pattern 5. (Mobile – Product) Want to make 2 items/row? https://www.abitorange.com/digital-quilting-patterns 6. (Mobile – Product) Want to increase add to cart button width? https://www.abitorange.com/digital-quilting-patterns/p/sg7c27jwduuo8bjpqnw08ebh0s6nqz 7. (Tablet – homepage) Icons are a bit off-center, want to align center them? 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