Recently a client who has the website made with Divi told me that he wanted the menus of his website to stand out, to be somewhat different , and I came up with a detail that I had ever seen on a website, to do that when hovering over a menu item this will float up and leave a nice shadow underneath .
Something like that…
Nice huh?
Well, you are going to see how easy it is to add that cool effect to your Divi menus, you just have to add a little CSS .
Open the WordPress customizer ( Appearance → Customize ) and in the additional CSS section add this code:
/ * Floating menu with shadow * /
# top-menu li {
padding-right: 5px;}
# top-menu> li> a {
padding: 10px! important;
margin-bottom: 10px;}
# top-menu .menu-item-has-children> a: first-child: after {
display: none;}
# top-menu-nav> ul> li> a {
-webkit-transform: perspective (1px) translateZ (0);
transform: perspective (1px) translateZ (0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;}
# top-menu-nav> ul> li> a: before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient (center, ellipse, rgba (0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient (ellipse at center, rgba (0, 0, 0, 0.35) 0%, transparent 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;}
# top-menu-nav> ul> li> a: hover,
# top-menu-nav> ul> li> a: focus,
# top-menu-nav> ul> li> a: active {
-webkit-transform: translateY (-5px);
transform: translateY (-5px);
}
# top-menu-nav> ul> li> a: hover: before,
# top-menu-nav> ul> li> a: focus: before,
# top-menu-nav> ul> li> a: active: before {
opacity: 1;
-webkit-transform: translateY (5px);
transform: translateY (5px);}
Just by adding it, you will see the change, but for all web visitors to see it, publish the changes and close the customizer. You already have it!
The CSS in the example tries not to modify any of the styles of your current menus, but you can customize it if you see any adjustments necessary .
For example, to modify the lateral, upper or lower padding of the menu you can modify these values:
# top-menu li {
padding-right: 5px;}
# top-menu> li> a {
padding: 10px! important;
margin-bottom: 10px;}
Or if, for example, you want to change the speed of the animation , the values to modify would be these others:
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
Noting that they are in 2 parts of the code, so the values in both parts must be consistent.
The trick is very simple to apply and the result is pretty cool, don’t you think?
Did you like this article? You can’t imagine what you’re missing on YouTube !
