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:
makedreamwebsi...
✅Get code snippet for Elementor Icon Menu:
makedreamwebsi...
✅Get this READY-MADE template on TEMPLATISH:
templatish.com...
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.

[@alltimeentertainment3280]

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

[@MakeDreamWebsite]

My pleasure! Thank you for inspiring me...

[@amirrabie7096]

Wooooooooooooooooooow! That was incredible man

[@MakeDreamWebsite]

Thank youuuuuuuuuu!

[@MDFahimUddin-p1e]

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

[@MakeDreamWebsite]

Glad to hear that

[@zenimates]

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

[@MakeDreamWebsite]

You’re welcome!

[@stevyotieno95]

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

[@MakeDreamWebsite]

You're welcome😊

[@liviuhanu4223]

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

[@MakeDreamWebsite]

Thanks... Noted the topic.

[@meesamabbasi2928]

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

[@MakeDreamWebsite]

Glad you like it!

[@LVN10]

Damn Boye! It's Amazing. Most Useful for WordPress. Without using plugin.😍😍😍 But Costly for Payment, Dollar Chris. Mostly Dual Currency Card Crysis.😢

[@MakeDreamWebsite]

You're welcome! You can follow the video if you don't want to purchase, they are exactly the same!

[@LVN10]

@@MakeDreamWebsite My Favourite is No.3 Design.

[@MakeDreamWebsite]

@@LVN10 you can use v3 class to achieve the 3rd one...

[@ISMAILSK-xb4ih]

@@MakeDreamWebsite sir mail kiya ha please provide your contact no I want buy it

[@MakeDreamWebsite]

@ISMAILSK-xb4ih it’s [e-mail]

[@pclalramenga304]

This guy is top notch.

[@daniel.trapanese]

Great stuff Fahd. Cheers!

[@shahalamnadim-fj7ps]

From today i'm your big fan. 🥰

[@MakeDreamWebsite]

🙏😇😇

[@carlibg]

Nice...!!!! great tutorial, i love your work... congratulation.

[@MakeDreamWebsite]

You're welcome!

[@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?

[@seriousweb4522]

nice design, good video, thanks!

[@MakeDreamWebsite]

You're welcome!

[@daniloribeiro71]

Seus tutoriais são incríveis, design de alto nível, muito obrigado por compartilhar...

[@MakeDreamWebsite]

de nada!

[@ahmedatef3328]

Hi, great video , I have tried your method of building the bottom navigation bar but I noticed an issue for product quantity automatic update in cart page, any suggestion fixing this issue?

[@dineshadhikari5573]

do your hover effect working??

[@fiteatsberlin]

Thank you very much for the video! Great content

[@MakeDreamWebsite]

You're welcome!

[@heynaik7732]

bro you making awesome tutorials , keep doing more bro 💕💕

[@MakeDreamWebsite]

Thank you, I will 🙌

[@YuliAlimuddin]

thank you for this great tutorial

[@MakeDreamWebsite]

You're welcome!

[@arlinn13]

whattt, is really nice tutorial, keep it update sirrr

[@MakeDreamWebsite]

Thank you, I will

[@sannykurniawan2681]

THANKS BROOO VERY COOOL

[@MakeDreamWebsite]

You are welcome!

[@AvinashPratap24]

Thank you very much bro... ❤

[@MakeDreamWebsite]

You're welcome!

[@riyadhjerjo3393]

Great job! Thanks a lot.

[@MakeDreamWebsite]

Welcome! 😇

[@markwhitby69]

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?

[@openparachute17]

Thank you. It works.

[@MakeDreamWebsite]

Welcome 😄

[@leila.jasim.berlin]

Thank you very much, it looks so great, and I could follow your video easily. I am just starting and I learned so much with you. new suscriber here :)

[@MakeDreamWebsite]

You're welcome! Happy to help you...

[@aman64045]

Please more videos on this topic 👍❤️

[@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

[@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?

[@MakeDreamWebsite]

Thank you for your support. You need to change the code for that... BTW you can email me

[@robby_carter]

thank you! I just emailed you @@MakeDreamWebsite

[@healthadvisor6969]

Awesome 👍 very useful tutorial thanks!

[@MakeDreamWebsite]

You're very welcome 🙏

[@muadmz]

bought it, thanks

[@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?

[@MakeDreamWebsite]

You can me your page link...

[@dennisvelarde]

@@MakeDreamWebsite Thanks I just did

[@la.allday]

Great video, keep them coming

[@MakeDreamWebsite]

Thank you!

[@oneilbronsen4669]

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.

[@hyeonwoopark8049]

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?

[@MakeDreamWebsite]

You can try to insert it in the footer instead. Even then it won't work you can email me...

[@hyeonwoopark8049]

@@MakeDreamWebsite If it inserts codes into the footer, the theme footer disappears same as header. I sent you an email.

[@MakeDreamWebsite]

@@hyeonwoopark8049 Okay, you can send me email...

[@NumanNuman-gk8wx]

Good work 🎉

[@MakeDreamWebsite]

Many many thanks

[@awaisrajpoot9646]

Amazing and creating work bro❤️

[@MakeDreamWebsite]

Thanks a ton! 🙏

[@awaisrajpoot9646]

@@MakeDreamWebsite always learned new things from you💖 bro

[@MariaCastro-nx5fl]

excellent video .. what label should each button have? or

[@MakeDreamWebsite]

These are wrapped inside div tagged automatically...

[@MariaCastro-nx5fl]

@@MakeDreamWebsite thank you so much

[@ceklisku]

Thanks

[@MakeDreamWebsite]

You're welcome!

[@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.

[@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

[@MakeDreamWebsite]

You're welcome... Which version of Elementor do you use?

[@cjcstudio6201]

Thank you😊

[@MakeDreamWebsite]

You're welcome!

[@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?

[@MakeDreamWebsite]

No it won't cause any issues

[@StarleneBreiter]

@@MakeDreamWebsite great, thanks for the quick reply

[@imrmohamadali]

Hello Thank you very much for your practical tutorial I followed all the steps step by step according to the tutorial, but the item "Hightlight icon in case of page URL" does not work for me Can you guide me?

[@MakeDreamWebsite]

Can you email me your page link please?

[@muhammadaleemkhan4011]

Bro I have a question. Can I use this differently on different listings on my site.

[@MakeDreamWebsite]

You can’t use multiple menu for a single page but on different page you can use different versions as a header and need to set the display conditions according to where you want to show which menu…

[@corentin.voranger]

Awsome, thanks a lot !

[@MakeDreamWebsite]

Very welcome!

[@lukasonggowijaya2259]

Amazing tutorial sir. Thankyou. But i have a problem in mobile screen, at first, the menu bar is been cut off at the bottom. I need to scroll the screen up, then the menu bar is viewing right. Do you have a solutions for this?

[@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

[@onlinesupportforum-it102]

Same issue. I think there have something wrong with the code. Not sure

[@MakeDreamWebsite]

You all can email me

[@onlinesupportforum-it102]

Thanks a lot for your kind reply sir, I just bought the template its very awesome and worth it.

[@globetrotterot]

Awesome as always 😍

[@MakeDreamWebsite]

Thanks again!

[@EkaWahyuningsih-i2m]

Is there a tutorial for a non container version (I mean Elementor which no longer uses containers but uses clouds and sections)?

[@MakeDreamWebsite]

No, it’s made with flexbox container. You can get the section/column version with the ready made template…

[@LABLACKMAGIC]

Thanks man, amazing tutorial as always. It works on my website but the only is on mobile I have to tap 2 times to be redirected. Any indications to fix this please ?

[@MakeDreamWebsite]

You can email me...

[@MegaPeterlustig123]

@@MakeDreamWebsite I have the same problem. :o

[@Lakshanpremarathna]

Thanks Brother ❤

[@MakeDreamWebsite]

You're welcome 😁

[@lepinskiwp]

Thanks for the excellent tutorial! When I slide the page the icon is not active... Anchors are configured correctly. What may be the problem?

[@MakeDreamWebsite]

You can email me

[@lepinskiwp]

@@MakeDreamWebsite I just sent an email through your website :)

[@lulufirdausramadhan4797]

if you add this menu in your post, change the [data-elementor-type="wp-page"] to [data-elementor-type="wp-post"] in line - + 200

[@innocentgaffar4048]

Awesome 👍

[@MakeDreamWebsite]

Thanks a ton! 😁

[@sarashj-gf5dy]

perfect

[@MakeDreamWebsite]

Thanks 🙏

[@bySterling]

Luv this!

[@MakeDreamWebsite]

Thanks a lot!

[@Mikol3on]

NICE!

[@MakeDreamWebsite]

Thanks

[@Jones-Creation-Lab]

How would you move this header vertical on the left side of the screen with the icons placed underneath each other?

[@humbertg.9661]

Thank you. I purchased it but it didn't work for me. The template it's broken (container). Can't find support either. Please help.

[@MakeDreamWebsite]

You can email me...

[@galihhermawan2130]

I see your library still says PRO, do you only use the Pro Elements plugin? without buying elementor pro?

[@MakeDreamWebsite]

As custom css is needed so Elementor pro is required here

[@dompetalquranindonesia]

any tutorial in elemntor pro version? 😁 kinda different menu here in pro

[@jiantramadan8559]

This is incredible!!! Can I request scrollable version of this menu navigation please, for example the nav has more than 5 menu

[@MakeDreamWebsite]

You're very welcome! Yes you can make it scrollable, but you need to modify the code snippet for that. For now, for more that 5 items, you can use the version 2. You can see it at the very last part of the video.

[@ahmadsyuddin135]

thanks for this great video! but i have a problem when i active icon-menu v3, the active icon color is not changing

[@Hector_tf1987]

Hi Mate, great Video and your skills are awesome! Just one question because you didn't explain this in the video and in the code i cant find the right part. When i scroll down until the footer area, the menu disappears. You can i make, that the menu never disappears?

[@MakeDreamWebsite]

If you search on the custom CSS you can see a line:- opacity: 0; Just remove that line

[@lulufirdausramadhan4797]

if you add this menu in your post, change the [data-elementor-type="wp-page"] to [data-elementor-type="wp-post"] in line - + 200

[@vivideyedc9792]

hi im having issue with the divider code. i have negative z index but still wont go behind the container.

[@MadeNew_Media]

Amazing Tutorial. I am using v3 on a site but I have to click each button twice for it to actually go to the link on mobile, works fine on the pc. Any ideas to fix this?

[@MakeDreamWebsite]

You can email me your page link...

[@Aledany]

I must have elementor ( pro ) ?

[@MujahidMusa-mp9gb]

does it necessarily require elementor or we can implement it using code snippets on other theme?

[@MakeDreamWebsite]

Yes, you can use any theme, but, Elementor and Elementor Pro plugins are needed

[@kpmjbmesir7200]

A great video🎉, i have a question, this widget effect doesn't appear on post, its only appear on page, How i activate it for post? I want to make a hover is active when scrolling

[@lulufirdausramadhan4797]

if you add this menu in your post, change the [data-elementor-type="wp-page"] to [data-elementor-type="wp-post"] in line - + 200

[@se8ia]

code for v3 didn't work?please help me there

[@dronnlodhi7]

How can i add working search button ?

[@abdullahbabakir3150]

woww, subscribed

[@MakeDreamWebsite]

🙏🙏

[@riegaldutoit5792]

hello can you make a tutorial on how to change the drop-down menu button for phone i mean when you press on the drop down button then there is a background how can i change the color of the bacground in elementor

[@shellycaldwell8964]

Hello. Just purchased and installed. My circles are not centering over the text. Can you help? I'm sure it some type of css conflict but I could use some assistance. Thank you!

[@shellycaldwell8964]

Nevermind. I changed it using the offset setting :-)

[@shellycaldwell8964]

Is it possible to have ONE of them turned on by default?

[@MakeDreamWebsite]

@@shellycaldwell8964 Yes, if you add the id's inside the page it'll automatically highlight the top most section's corresponding icon by default and it's also work for full page URL. For more details, you can see the instructions PDF file...

[@shellycaldwell8964]

@@MakeDreamWebsite You ROCK!!!!!

[@ISMAILSK-xb4ih]

@MakeDreamWebsite many many thanks 😊 sir your big fan. My problem solved. Many many love from my Heart ❤️ 💙

[@MakeDreamWebsite]

You’re welcome

[@ARBuTtS24]

*Love It* 💌💌💌

[@MakeDreamWebsite]

😇😇

[@visualmodo]

Excellent content :)

[@MakeDreamWebsite]

Thanks a ton!!!

[@iplaystudio7482]

New Subscriber here! Hi!

[@MakeDreamWebsite]

Thanks for subscribing!

[@iplaystudio7482]

@@MakeDreamWebsite Thank you so much for creating and sharing your expertise, I followed your tutorial, Although it took me 20x more time then you ; ) . You are awesome!

[@MakeDreamWebsite]

Glad to know that helps you!

[@MrGarthcsmith]

Can this be made just for mobile responsive ?

[@MakeDreamWebsite]

You can create 2 menus: 1 for desktop, tablet and this one for mobile only. You can set the display condition from the Elementor's responsive option.

[@sportnesia_id]

Nice. Interested to buy it. Can you make it slidable too?

[@MakeDreamWebsite]

Hi, sliding is not supported for this menu 😔

[@The.VoiceOfBengal]

I want to change the menu colour to dark so that I change the container colour dark blue but the floating bubble colour could not change please help me

[@MakeDreamWebsite]

You can change it at the top lines of the custom css code

[@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?

[@MakeDreamWebsite]

You need to put the id's inside your page's sections.

[@PantheraPress]

@@MakeDreamWebsite We did - in the CSS ID area under the Advanced tab and it still doesn't work

[@PantheraPress]

We also tried changing the HTML ID of the containers to sections and that did not work either.

[@lepinskiwp]

@@PantheraPress did you have any solution for this? I am also having the same problem.

[@bosque3149]

@@lepinskiwp please notif me if u get the solution bro, same problem here, thanks.

[@Vincent-20100]

Hi, thank you for you job ! I have a problem with a java script, when i hover a section the nav bar don't hightlighing. Need your help

[@MakeDreamWebsite]

Have you put the id(s) properly...

[@Vincent-20100]

@@MakeDreamWebsite Yes, when i click on the icon that show me the good section but not when i scroll and hover section..

[@imageburst8357]

Is this possible to do this without the flex box container? I tried following your tutorial but got stuck at position the section (container) to a fixed position at the bottom. There's no such option in my advanced panel.

[@MakeDreamWebsite]

Yes, it's possible. I've added a section/column version with my ready template. If you can't find it you can email me.

[@AnthonyTilahun]

​@@MakeDreamWebsite Did you make a tutorial for those that have the flexbox container?

[@MakeDreamWebsite]

@@AnthonyTilahun Yes, this one is for the flexbox container user...

[@masterquiz5081]

Hello, this HTML code is interfering with the "Media Carrousel" widget. When I remove the java script at the beginning of the code, the error disappears. Do you have any idea how we can solve this, please?

[@MakeDreamWebsite]

You can email me...

[@BelvisiUmberto]

Is elementro pro needed or can i use it also with element free?

[@MakeDreamWebsite]

As there are custom code needed so Elementor Pro is also required

[@graphiproshop]

I like this, does it work with the free Elementor plugin?

[@graphiproshop]

I want to buy this templates

[@MakeDreamWebsite]

You need both Elementor and Elementor Pro to make it work!

[@heroshop1203]

Hi, would it work with 10 scrollable icons? I want to buy the Icon Menu. Thank you.

[@MakeDreamWebsite]

Yes, it would work with 10 icons, you just need to duplicate those icon box widget and cahnge the links, icons then

[@heroshop1203]

Thank you for your response, would the 10 icons remain on the same scroll-type line?@@MakeDreamWebsite

[@LeeHouselander-m4x]

On mobile you have to click it twice for it to open the page its linked to. Is there a way to get this to click and go straight to the page/area?

[@WahMeGo]

Pls answer this

[@MakeDreamWebsite]

Ok I'll update the code snippet to resolve it

[@tribhuwanjoshi]

does it necessary to have elementor pro version for working of this menu? Will it work in elementor free version?

[@MakeDreamWebsite]

As it require custom code and theme builder functionality so you need Elementor Pro.

[@soyeb_ali]

Hello Bro, I made this side navbar with the help of your video. But whenever I refresh the page the navbar shows for 1 second on mobile. How can I fix this? Please help! Thank you.

[@4buyn]

If i want to show only in mobile device how can i Disable in the web browser?

[@MakeDreamWebsite]

For that container, go to Advanced > Responsive > Hide on Desktop and check the option.

[@Darknature97]

Is it possible to set a gradient as background color or just a single color?

[@MakeDreamWebsite]

Gradient background color isn't possible in this case

[@Darknature97]

@@MakeDreamWebsite Okay thanks :) I have a bug, how can I contact you that I can ask you about it? :)

[@MakeDreamWebsite]

@@Darknature97 You can find my email on the About section

[@mikakonetzke]

I tried to put the hover effect behind it and tried several numbers on the Z-Index...nothing is working it remains in the same postion...could you please help me

[@SazzGamingChannel]

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

[@MakeDreamWebsite]

You can email me…

[@rjcapara5882]

I purchased the template but it doesn't trigger the icons when you reach the assigned section ID. Only hovering on it will trigger it. How can I fix it?

[@MakeDreamWebsite]

Have you put the correct ID with your container/section's id? Make sure you don't put the id with any nested container/section. You need to put it with the top level containers/sections. If then it still doesn't work, then you can email me. I'll have a look on that issue...

[@jespereikapi3937]

Hello very good my friend!! how can I do if i only want to make it appears only for the tablet and mobile version of my website? Thanks!

[@MakeDreamWebsite]

You need to go to the Advanced > Responsive settings of that container. Enable the option "Hide On Desktop"

[@jespereikapi3937]

@@MakeDreamWebsite ok thanks!!😉

[@alexandrevicente3773]

IPhones are not compatible . iphone users need to press two times. Apple says that because the iphone uses some toutch screen functionalaties that are not compatible with jsome of the code. But is great base !!

[@MakeDreamWebsite]

You can email me... I'll try to solve the issue for iOS

[@richardson8958]

Can this be made to be footer and not header, I mean like this what if i want to use it as footer and not header.

[@MakeDreamWebsite]

Yes, that also works...

[@richardson8958]

@@MakeDreamWebsite check your email sir i sent u a presale question

[@MakeDreamWebsite]

@@richardson8958 Unfortunately, I'm outside of my work till 10th April... I'll look at the issue when I get back kzbin.infoUgkx_vDGMl8BP40AlU_jOwfIXHgKPdTfRoT9

[@richardson8958]

@@MakeDreamWebsite Hello sent you an Email, check and Revert

[@mkellyb754]

Btw I have a question for you bro, I want to know if can make carousel on Elementor like the Netflix video movies? Let me if it’s possible or which who can do that

[@MakeDreamWebsite]

Noted!