Mirror Hover Effect For Divi Dropdown Menu Items
In this post I would like to show you how to implement a mirror-like hover effect for Divi dropdown menu items. This effect will work for desktop menu only(since hover effects do not make sense on mobile) and we are going to use CSS only.
Demo
Implementation
This effect requires the submenu items to be applied the overflow:hidden rule, so, we have to exclude the submenu parent items from being applied this effect since the lower level submenus will be hidden. We do this by using the :not() CSS pseudo-class.
#top-menu .sub-menu .menu-item:not(.menu-item-has-children) { overflow:hidden; }
Next let’s create the thin line that will be crossing the submenu items on hovering over. We will use the :after pseudo-element for that. Since it needs to be show on hover only we will hide it by moving it to the left (left: -100%;).
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):after { content: ''; position:absolute; width:80%; border-bottom:1px solid rgba(255, 255, 255, 0.5); /* style the line here */ bottom:50%; left:-100%; -webkit-transition-delay: all 0.5s; -o-transition-delay: all 0.5s; transition-delay: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
The following snippet will make the thin line move from left to right on hover and remain hidden again.
#top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover:after { left:100%; }
Now lets apply a text shadow to submenu items and use it as the “mirror reflection” of submenu items and define how it will behave on hover.
#top-menu .sub-menu .menu-item:not(.menu-item-has-children) a { text-shadow:0px -40px 0px rgba(255, 255, 255, 1); /* change mirrored link color here */ -webkit-transition: all 0.75s; -o-transition: all 0.75s; transition: all 0.75s; -webkit-transform: translateY(100%) translateZ(0); transform: translateY(100%) translateZ(0); -webkit-transition-delay: all 0.25s; -o-transition-delay: all 0.25s; transition-delay: all 0.25s; } #top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover a { text-shadow:0px -40px 0px rgba(255, 255, 255, 0); -webkit-transform:translateY(0%) translateZ(0) scale(1.1); transform:translateY(0%) translateZ(0) scale(1); }
Bringing all of the CSS together
Now let’s bring all of the CSS above together.
/* Start Mirror hover effect for Divi dropdown menu */ #top-menu .sub-menu .menu-item:not(.menu-item-has-children) { overflow:hidden; } #top-menu .sub-menu .menu-item:not(.menu-item-has-children):after { content: ''; position:absolute; width:80%; border-bottom:1px solid rgba(255, 255, 255, 0.5); /* style the line here */ bottom:50%; left:-100%; -webkit-transition-delay: all 0.5s; -o-transition-delay: all 0.5s; transition-delay: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover:after { left:100%; } #top-menu .sub-menu .menu-item:not(.menu-item-has-children) a { text-shadow:0px -40px 0px rgba(255, 255, 255, 1); /* change mirrored link color here */ -webkit-transition: all 0.75s; -o-transition: all 0.75s; transition: all 0.75s; -webkit-transform: translateY(100%) translateZ(0); transform: translateY(100%) translateZ(0); -webkit-transition-delay: all 0.25s; -o-transition-delay: all 0.25s; transition-delay: all 0.25s; } #top-menu .sub-menu .menu-item:not(.menu-item-has-children):hover a { text-shadow:0px -40px 0px rgba(255, 255, 255, 0); -webkit-transform:translateY(0%) translateZ(0) scale(1.1); transform:translateY(0%) translateZ(0) scale(1); } /* End Mirror hover effect for Divi dropdown menu */
Add this CSS either into the Custom CSS field on Divi -> Theme Options page or into the Divi -> Theme Customizer -> Additional CSS field or add it to you child theme style.css file. Save it and enjoy the effect!
Hope you find this tutorial useful. Share it with your friends and feel free to leave your thoughts and suggestions in the comments section below and subscribe to stay updated ;)
Any way to have this work with pages that take up two lines under the parent menu? Pages that take up two lines will get the bottom words cut off and leave an ugly space.
Hi Jake,
not sure if I understand correctly your problem but it seems to work fine on my end for such menu items. A url of the site where you have this issue would be helpful.