How to Make Astonishing Animated Menu With Multi WordPress Theme?

02.05.20 Multi Theme Multi Features 0

WOW effect

A menu is a key area of your website, serving multiple important purposes. It’s a guide that leads your visitors to important pages and information. It’s essential for the overall aesthetics and user-friendliness of the website. It also affects traffic and time spent on your page by its visitors, improving conversion rates. This is because the longer people will stay on your website, the higher chance they will become customers. And vice versa: if the user experience isn’t helpful and readable, the visitor will get confused or annoyed. This will increase the bounce rate and affect your rankings and SEO.

Luckily, Multi can take your website’s menu design to a whole new level without the need for any additional plugins.

Want to know the best part?

You won’t need to add a single line of code, too! Everything is fully customizable through the Multi Theme Customizer options. You’re just a few clicks away from a beautiful, user-friendly animated menu to boost your conversion rates.

Let’s dive in!

Accessing the Header Menu settings panel

From your WordPress Dashboard, go to Appearance and click Customize to access the Theme Customizer. Then, choose the Header options panel from the customizer sidebar. In the Header panel, choose Menu settings. Now you’ve accessed the options that will help you create an awesome animated menu in no time.

Mouse hover animation

You can underline each menu element on mouse hover. Multi offers as many as eleven different underline animation effects! Choose from dropping in or out, growing from left, top, bottom or middle, or go with a classic fade effect. The full list of available mouse hover animation includes:

  • Grow from middle and bottom
  • Grow from middle and top
  • Grow from middle
  • Fade
  • Grow from top
  • Grow from bottom
  • Grow from left
  • Grow from left 2
  • Grow from left and right
  • Drop in
  • Drop out

Follow mouse cursor effect

You can make your header menu even more captivating by adding a cursor following effect. The border underlining specific menu items will then pursue the cursor. By mimicking your viewer’s actions, it will provide a fresh and engaging experience.

Have fun with three different effects:

  • Move
  • Move and stay on current link
  • Stretch

Or disable the effect and keep things simple, if you prefer.

Link line customizing

In the same options panel, you’ll find other options that will let you achieve pixel-perfect precision in your design. Set the exact thickness and length of the link line using pixels. Then, you can select a link line vertical position and vertical offset. You can also set the horizontal alignment of the line, choosing from left, center or right, as well as its color.

Summary

As you can now see, Multi Theme gives you full customization control over your header menu design. You can recreate any style idea and implement it on your website without any additional plugins or custom CSS code.

And it’s so simple and intuitive, that it will only take a couple of minutes.