Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 hover effect on nav links


penpen

Question

9 answers to this question

Recommended Posts

  • 0
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
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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?

abitorange.com-01-min.png

2. (Tablet/Mobile – Menu) Reduce spacing above Login

abitorange.com-02-min.pngabitorange.com-02-min-1.png

 

3. (Tablet – homepage) Text overlap

abitorange.com-04-min.png

4. (Tablet – Footer) Remove white space between button – orange footer. Text in infor column overlap.

https://www.abitorange.com/custom-pattern

 

abitorange.com-05-min-1.png

5. (Mobile – Product) Want to make 2 items/row?

https://www.abitorange.com/digital-quilting-patterns

abitorange.com-06-min.png

 

6. (Mobile – Product) Want to increase add to cart button width?

https://www.abitorange.com/digital-quilting-patterns/p/sg7c27jwduuo8bjpqnw08ebh0s6nqz

abitorange.com-07-min.png

7. (Tablet – homepage) Icons are a bit off-center, want to align center them?

abitorange.com-08-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...