body,.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post p,body .et_pb_bg_layout_dark .et_pb_post p{font-size:14px}.et_pb_slide_content,.et_pb_best_value{font-size:15px}body{color:#000000}body,.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post p,body .et_pb_bg_layout_dark .et_pb_post p{font-weight:600}.et_pb_slide_content,.et_pb_best_value{font-weight:600}a{color:#007cf9}h1,h2,h3,h4,h5,h6,.et_quote_content blockquote p,.et_pb_slide_description .et_pb_slide_title{}@media only screen and (min-width:1350px){.et_pb_row{padding:27px 0}.et_pb_section{padding:54px 0}.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:81px}.et_pb_fullwidth_section{padding:0}}h1,h1.et_pb_contact_main_title,.et_pb_title_container h1{font-weight:400}h2,.product .related h2,.et_pb_column_1_2 .et_quote_content blockquote p{font-weight:400}h3{font-weight:400}h4,.et_pb_circle_counter h3,.et_pb_number_counter h3,.et_pb_column_1_3 .et_pb_post h2,.et_pb_column_1_4 .et_pb_post h2,.et_pb_blog_grid h2,.et_pb_column_1_3 .et_quote_content blockquote p,.et_pb_column_3_8 .et_quote_content blockquote p,.et_pb_column_1_4 .et_quote_content blockquote p,.et_pb_blog_grid .et_quote_content blockquote p,.et_pb_column_1_3 .et_link_content h2,.et_pb_column_3_8 .et_link_content h2,.et_pb_column_1_4 .et_link_content h2,.et_pb_blog_grid .et_link_content h2,.et_pb_column_1_3 .et_audio_content h2,.et_pb_column_3_8 .et_audio_content h2,.et_pb_column_1_4 .et_audio_content h2,.et_pb_blog_grid .et_audio_content h2,.et_pb_column_3_8 .et_pb_audio_module_content h2,.et_pb_column_1_3 .et_pb_audio_module_content h2,.et_pb_gallery_grid .et_pb_gallery_item h3,.et_pb_portfolio_grid .et_pb_portfolio_item h2,.et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2{font-weight:400}h5{font-weight:400}h6{font-weight:400}.et_pb_slide_description .et_pb_slide_title{font-weight:400}.et_pb_gallery_grid .et_pb_gallery_item h3,.et_pb_portfolio_grid .et_pb_portfolio_item h2,.et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2,.et_pb_column_1_4 .et_pb_audio_module_content h2{font-weight:400}	h1,h2,h3,h4,h5,h6{font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif}body,input,textarea,select{font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif}Divi Menu with Vibrating Hover Effect
Divi Menu Hover Effect
Vibrating text animation with #1270F9 background on hover
Interactive Demo
Hover over the menu items to see the effect
Home
Services
Portfolio
About
Blog
Contact
Implementation Guide for Divi
1
Add CSS to Divi
Add the following CSS to your Divi theme:.animated-menu{  display:flex;  justify-content:center;  list-style:none;  padding:0;  margin:0}.menu-item{  position:relative}.menu-item a{  display:block;  padding:15px 20px;  text-decoration:none;  font-weight:600;  color:#2c3e50;  transition:all 0.4s ease;  position:relative;  z-index:2}.menu-item:hover a{  color:#fff!important;  animation:vibrate 0.3s ease}.menu-item:hover::before{  content:'';  position:absolute;  top:0;  left:0;  width:100%;  height:100%;  background-color:#38b6ff;  z-index:1;  animation:backgroundFade 0.3s ease forwards}@keyframes vibrate{  0%{transform:translateX(0)}  25%{transform:translateX(-3px)}  50%{transform:translateX(3px)}  75%{transform:translateX(-2px)}  100%{transform:translateX(0)}}@keyframes backgroundFade{  0%{opacity:0}  100%{opacity:1}}Add this to:Divi → Theme Options → General → Custom CSS
2
Add CSS Classes to Menu
Add these classes to your menu module and menu items:CSS Class:animated-menu
CSS Class:menu-item
To add these classes in Divi:Edit your menu module → Advanced → CSS Classes
For each menu item:Edit menu item → CSS Classes → Add "menu-item"
3
Customize for Your Theme
Adjust these values to match your Divi theme:.menu-item a{  padding:15px 20px}.menu-item a{  color:#2c3e50}@keyframes vibrate{  25%{transform:translateX(-3px)}  50%{transform:translateX(3px)}}Designed for WordPress Divi Builder | Hover over the menu items to see the animation effect
Background Color:#1270F9
body{overflow-x:hidden}