How to fix New Chrome Issue with woocommerce
Divi Theme Tutorial
Hello Guys , Here is another Divi Theme Tutorial which will show you “How to make an underline effect while hovering on Menu Items in Divi Theme”.
Before Starting I will suggest you guys to make Child theme. If u don’t know how to create a child theme Kindly Follow my tutorial How to create a child theme in wordpress .
.et-fixed-header { min-height: 50px !important;}
#top-menu a:hover{padding-bottom:4px !important;border-bottom:1px solid #000;}
If u want to control the hover timing and animation use this code
.et-fixed-header { min-height: 50px !important;}
#top-menu a:hover{
padding-bottom:4px !important;
border-bottom:1px solid #000;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
Important in this property is transition-timing-function, there are 6 functions.
- Linear – Starts and ends transitionat a same speed.
- ease – Starts slowly, then rapidly faster and slower.
- ease-in – Start transition slowly and ends faster.
- ease-out – Start transition fastly and ends slower.
- ease-in-out – Starts and ends transition at slow speed.
- cubic-bezier – We can specify where speed should be slow/faster by giving values in X,Y coordinates.
Note: 500ms = 0.5s (1s = 1000ms)
Copy the Code above and follow the steps:-
Go to Appearance->Editor.
It will open stylesheet.css
Paste the above copied code in the empty space and update the file.
OR
Go to Appearance->Divi Theme Options->custom css
paste the code and save.
Voila We are done and now Main menu items will have and underline while hovering over them.
Click For Demo
Related posts
