Archived topic
How to Make Menu Items Rise when Rolled Over - As Seen in "Donate" template
1 reply · Started by Bettijo on July 12, 2021
Viewing posts 1–2 of 2
I really liked the way the top nav menu items sort of rise up when you roll over them in the "Donate" template. I am wondering if anyone knows how I can make this effect happen with my Generate Press site that is using a different template?
Thanks!
Hi there,
You can add this CSS to your site to achieve the same effect.
/* GeneratePress Site CSS */ /* navigation hover lift */
.main-navigation .main-nav ul li > a {
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.main-navigation .main-nav ul li:hover > a {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}You can change the translate3d value if you want a more pronounced effect. :D
This archived topic is closed to new replies.
