Make this Icon Navigation Menu Bar like an App in Elementor/WordPress | Magic Menu Indicator
81.3 هزار بار بازدید -
2 سال پیش
-
Today we will see how
Today we will see how to make this Icon Navigation Menu Bar like an App in Elementor/WordPress website. Let's just create a Magic Menu Indicator.
✅Get Elementor Pro:
https://makedreamwebsite.com/elemento...
✅Get code snippet for Elementor Icon Menu:
https://makedreamwebsite.com/make-thi...
✅Get this READY-MADE template on TEMPLATISH:
https://templatish.com/template/eleme...
In this tutorial, I'll show you how you can make this Icon Navigation Menu in your WordPress website using Elementor. Here when we hover over the items, it becomes active with a beautiful animation and when we click on an item, it also scroll to that specific section.
And not only that, when you scroll inside your page, the items are also auto highlighted according to the section. So, it’s working in both ways. And when you go to the very bottom of your page, it also becomes invisible. So, it’s not a problem to see the footer section of your website. You can use this menu (with icons) both for single page and multipage website.
If you want, you can get this magic menu indicator as a ready made template from my template shop. And here also as a bonus, you'll get 3 different versions and all of them are supported on both the container and non-container version. But, if you don't want to get these templates, you can also start it from scratch.
First, you need to take a container and inside that add some icon box widgets. Place them horizontally and position it at the bottom. Let's also add some JavaScript code to activate the icon hover effects with text. Then, we add a circle by using a divider widget.
After that, we make it responsive from the tablet and mobile devices. So, it also looks awesome from the mobile devices and gives you really an app-like feel.
So that's how you can design this icon menu in Elementor/WordPress. If you enjoy this advanced navbar tutorial, don't forget to like and subscribe.
✅Get Elementor Pro:
https://makedreamwebsite.com/elemento...
✅Get code snippet for Elementor Icon Menu:
https://makedreamwebsite.com/make-thi...
✅Get this READY-MADE template on TEMPLATISH:
https://templatish.com/template/eleme...
In this tutorial, I'll show you how you can make this Icon Navigation Menu in your WordPress website using Elementor. Here when we hover over the items, it becomes active with a beautiful animation and when we click on an item, it also scroll to that specific section.
And not only that, when you scroll inside your page, the items are also auto highlighted according to the section. So, it’s working in both ways. And when you go to the very bottom of your page, it also becomes invisible. So, it’s not a problem to see the footer section of your website. You can use this menu (with icons) both for single page and multipage website.
If you want, you can get this magic menu indicator as a ready made template from my template shop. And here also as a bonus, you'll get 3 different versions and all of them are supported on both the container and non-container version. But, if you don't want to get these templates, you can also start it from scratch.
First, you need to take a container and inside that add some icon box widgets. Place them horizontally and position it at the bottom. Let's also add some JavaScript code to activate the icon hover effects with text. Then, we add a circle by using a divider widget.
After that, we make it responsive from the tablet and mobile devices. So, it also looks awesome from the mobile devices and gives you really an app-like feel.
So that's how you can design this icon menu in Elementor/WordPress. If you enjoy this advanced navbar tutorial, don't forget to like and subscribe.
2 سال پیش
در تاریخ 1401/08/16 منتشر شده
است.
81,316
بـار بازدید شده