As a matter of fact, you can easily create a stylish menu appearance using JetMenu plugin. It allows creating eye-catching mega menu items and also provides hundreds of stylization options for the main menu and submenu items.
Customizing the menu items style on hover and click
You can style up the main menu items appearance on hover and click from WordPress Dashboard or Elementor page builder. Proceed to the JetMenu > Main Menu Styles, or directly via Elementor page builder to customize the styles for Mega Menu or Vertical Mega Menu widget.
In this tutorial, we’re going to change the menu items style on hover in Elementor.
Step 1 — Add Mega Menu widget to the page you’re editing, or to the header template.
Step 2 — Open Style > Main Menu Items block in the sidebar on the left.
Here you can access the Normal, Hover and Active settings for the Main Menu items.
Just switch between the modes and define the different style settings for each of them whenever you need to alter the main menu item’s appearance on hover or when it becomes active.
E.g., you can change the item’s text or description color when you hover over it.
Colors and backgrounds
Step 3 — Also, you can set the different color for the item’s icon and set the color for the drop-down arrow so that it changes when the drop-down opens.
Step 4 — You can as well set different background color and use a different background type. E.g., keep using the solid color in the normal mode and add a gradient with the light opacity on hover and when the item becomes active.
Step 5 — Another effect is to underline the item when one hovers over it. To accomplish this you can add a Solid border type on hover and then set its width to 0 px for Top, Right and Left and set the necessary border width (e.g., 3 px) for the Bottom value.
Step 6 — The border color can also be adjusted.
Actually, it can be fun to manage the main menu item’s appearance on hover and when they become active. You can create different stylish designs in a matter of a few clicks.
Customizing Sub Menu Items Style
Also, the same Hover and Active modes are available for the Sub menu items. To access them open the Sub Menu block and here look for the corresponding settings.
After you’re done with creating the styles for Hover and Active modes of your menu items, save all the changes by clicking the Update button below.
Great job! Now your menu looks magnificent!