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}