Design an Interactive Spinning Menu with Ease!
Follow these steps to recreate this stunning rotating DiviMenu. In this example, we’ll use the Popup link type to open a Layout stored in the Divi Library as a Popup.
PREVIEW:
Paste this into DiviMenus → Advanced → CSS Class:
rotating-dm
By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.
Paste this into Page Settings → Advanced → Custom CSS:
@keyframes rotate-ltr {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate-rtl {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.rotating-dm .dd-divimenu {
animation: rotate-ltr 30s linear both infinite;
}
.rotating-dm .dd-divimenu img {
animation: rotate-rtl 30s linear both infinite;
}
Customize the animation speed by adjusting the value of 30s to your liking. In this case, 30 seconds is the time it takes for the wheel to rotate a full revolution.
🥳 That’s it!
Boost your creativity!
Want to create all kinds of Navigation Menus even more easily?
