7.1 hover effect on nav links

Add to Home > Design > Custom CSS

div.header-nav-item a:hover {
    opacity: 0.5 !important;
}

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?

div.header-nav-item a:hover {
    opacity: 0.5 !important;
}
div.header-nav-item a {
    transition: all 0.1s !important;
}

Thank you that works!

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

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

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;
}

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. 

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?