Make this Icon Navigation Menu Bar like an App in Elementor/WordPress | Magic Menu Indicator

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:

✅Get code snippet for Elementor Icon Menu:

✅Get this READY-MADE template on TEMPLATISH:

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.

[alltimeentertainment]

Absolutely stunning. Tbh you r the reason why I'm still interested in elementor

[Eccentricization]

Hi, thank you for your awesome tutorials! You increased my skill level to the next level. Is it possible to place the menu bar horizontal on the right side? Which points do I have to change in the code?

[liviuhanu]

Bro I can’t wait for a conditional logic form! Great video thanks

[hyeonwoopark]

Hi, I have purchased your Templates on Gunmroad. I'm using the theme header, but after using your template bottom menu bar, the default theme top header disappears. How to use 2 (Theme heaer, your bottom menu bar) at the same time?

[stevyotieno]

Thanks for the tutorial....This makes a website really stand out, especially on mobile.

[MDFahimUddin-pe]

Very very appreciating your afford for this Super manu. Best I have ever had. ❤❤❤

[dennisvelarde]

Hi! Thanks for such a great video, I bought the Icon Menu, I installed it, but I also want to keep my main header. I can't add it to my current header, because it comes with my theme, I don't have a header made on Elementor. I tried to add it to my footer (I have my footer made on Elementor) but is not working. Any suggestions?

[LVN]

Damn Boye!
It's Amazing.
Most Useful for WordPress.
Without using plugin.😍😍😍

But Costly for Payment,
Dollar Chris.
Mostly Dual Currency Card Crysis.😢

[zenithkrueger]

Your videos are exactly what I've been looking for! Thanks a lotttt

[oneilbronsen]

Hi, Great video very informative and interesting. I have a question, is it possible to tweek the animation on the pop up icons to go back into place after loading into the selected page. It gets very distracting on the mobile view, having the icon popped up as you roll through the page. If it is possible. How would i change the css or html? Thank you in advance.

[robby_carter]

Amazing! I purchased it even after learning how to do it just to show you support for your amazing work. I do have a question - How can I only make this menu appear when i start scrolling?

[muadmz]

When I do it on my site, the white circle is going on top of the elementor icons on mouse hover. So the hover effect is not really working properly. I tried to increase the z-index to 12 for the icon widgets, but it did not resolve the issue. So would like to know if faced with something like this, how do we go about fixing it, as I would like to increase my own skills. Thanks in advance

[Fitnessghh]

Thanks man, I have a question if you don't mind. I made it and everything is working well but icons isn't in the center of the circle when you push it up how can i modulate this. Thanks in advance

[ahmadkholil]

Hello author:Hello author:
Your javascript code (JavaScript Code Snippet for the Navigation Menu) will cause (Dynamic Google Maps) to be overwritten. Is there a way to solve it? Your reply is really great, thank you.

[markwhitby]

Excellent work and really easy to follow tutorial. I'm testing this out on a mobile view on an iphone and it seems that i have to double click then links, as the first click highlights the item and then the second click opens the link, is there a way to change this?

[StarleneBreiter]

I love how this looks! I ended up purchasing the code from you, thank you so much!
I do have a question, would this interfere at all with the "Elementor Advanced Slider with Card Carousel" code?

[meesamabbasi]

It’s working great. Loving the design.🙏🏻

[JahidHasanRume]

V3 is not working correctly as only the purple circle is active without the white icon after hovering

[PantheraPress]

Hey, I purchased your downloadable version, but it's not auto highlighting as you scroll through the sections (to show what section you're in). Is it missing some Javascript or something I need?

[Forlaso]

hi my friend, thank you so much for everything you do, I watch all of your videos, i need some help, half of the container goes to the right of the screen (on both desktop and mobile) and it looks weird and looks “lighty”, even tho i did every single step on your video