Make this Elementor Full Width Menu with Distortion Image Hover Effect | Animated Navigation Menu

In this tutorial, I'll show you how to make this Elementor Full Width Menu with Distortion Image Hover Effect and create an Animated Navigation Menu.

✅Get Elementor Pro:
https://makedreamwebsite.com/elementor-pro

✅Get code snippet for Full Width Menu + SVG Image:
https://makedreamwebsite.com/make-this-elementor-full-width-menu-with-distortion-image-hover-effect/

✅Get this as Ready Template (✨1 CLICK INSTALL✨):
https://templatish.com/template/elementor-distorted-image-menu

Today, I’ll show you how to make a cool full width/screen navigation menu with images on your Elementor website. When you click on this hamburger icon you can see a cool entrance animation with all the elements: with the search bar, the main one, also with the bottom one. If we reopen it, you can see the animation again.

And when we hover on the items, you can see different photos with each of these and also with the bottom navigation we have another cool hover animation. When we click on the search bar, there is also a nice animation where you can search anything from your website.

If you want, you can get this as a ready made template from my template shop. Here as a bonus, you'll get total 4 versions. And all of them are supported for the container and non-container versions. But, if you don't want these ready template, you can also start it from scratch.

First, create a container where we place everything. Then, create a header and inside that make a logo and hamburger icon. Also we made a sidebar where we also place the icon and logo.

In the main part, we add the search option, main and secondary navigation and the close button. Note that, we made the icons with containers and divider widgets inside that. With our distorted image menu, we add an image distortion hover effect.

Let's add some classes with some containers and widgets and finally add the custom code to make it work. From the custom code, you also have the options to customise things.

After that, you also need to make it responsive for the tablet and mobile devices. On mobile, here we remove the sidebar.

So, that's how you can design this advanced hamburger animated menu in your WordPress Website. If you enjoy this tutorial, don't forget to like and subscribe.

Видео Make this Elementor Full Width Menu with Distortion Image Hover Effect | Animated Navigation Menu канала Make Dream Website