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

[@amirrabie7096]

Wooooooooooooooooooow! That was incredible man

[@MakeDreamWebsite]

Thank youuuuuuuuuu!

[@alltimeentertainment3280]

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

[@MakeDreamWebsite]

My pleasure! Thank you for inspiring me...

[@MDFahimUddin-p1e]

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

[@MakeDreamWebsite]

Glad to hear that

[@stevyotieno95]

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

[@MakeDreamWebsite]

You're welcome😊

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

[@zenimates]

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

[@MakeDreamWebsite]

You’re welcome!

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

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

[@daniel.trapanese]

Great stuff Fahd. Cheers!

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

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

[@pclalramenga304]

This guy is top notch.

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

[@liviuhanu4223]

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

[@MakeDreamWebsite]

Thanks... Noted the topic.

[@shahalamnadim-fj7ps]

From today i'm your big fan. 🥰

[@MakeDreamWebsite]

🙏😇😇

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

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

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

[@no_hb6918]

Thank you, for this awesome video!!

[@MakeDreamWebsite]

You’re welcome!

[@meesamabbasi2928]

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

[@MakeDreamWebsite]

Glad you like it!

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

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

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

[@bosque3149]

hi bro, this tutorial is awsme, but maybe you miss something on that video (07:58), cuz i already repeat that 3 times but still not same, the 'active' menu disaper when we scrol, and menu dosnt folowing to change when we scroll, its still close. please help me to active that animation scroll on that menu, ty

[@MakeDreamWebsite]

You might skip some part at the beginning, there I show you to add id's with each sections to get that highlight effect...

[@bosque3149]

@@MakeDreamWebsite thank you man, now i know why this happen, no code are missing, but only thing different is i build in post side, when i try to use it on page its working perfect, now i wanna ask, how to make that menu working perfect on POST same as PAGE. thanks alot. 👏

[@MakeDreamWebsite]

@@bosque3149 if you build your post page with elementor instead of Gutenberg then it will work

[@followinglove777]

#MakeDreamWebsite Sir "icon-menu v3" not working properly, when the round purple 🟣 div moves to other icon, the icon disappeared suddenly and only purple 🟣 round div showing. Please help me to resolve this problem, I look forward to your positive response. Thank you.

[@MakeDreamWebsite]

Hi, can you please email me. I'll have a look on the issue...

[@followinglove777]

@@MakeDreamWebsite Yes Sir, I will, Sir can I contact you via your website contact form?

[@followinglove777]

​@@MakeDreamWebsite Yes Sir! I will. Sir can I contact with you via your website contact from?

[@ISMAILSK-xb4ih]

@@MakeDreamWebsite Sir "icon-menu v3" not working properly, when the round purple 🟣 div moves to other icon, the icon disappeared suddenly and only purple 🟣 round div showing. Please help me to resolve this problem, I look forward to your positive response. Thank you. same problem sir

[@ISMAILSK-xb4ih]

@@followinglove777 your problem fix or not

[@vivideyedc9792]

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

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

[@seriousweb4522]

nice design, good video, thanks!

[@MakeDreamWebsite]

You're welcome!

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

[@ahmadsyuddin135]

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

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

[@carlibg]

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

[@MakeDreamWebsite]

You're welcome!

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

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

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

[@Jones-Creation-Lab]

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

[@NumanNuman-gk8wx]

Good work 🎉

[@MakeDreamWebsite]

Many many thanks

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

[@dompetalquranindonesia]

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

[@sportnesia_id]

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

[@MakeDreamWebsite]

Hi, sliding is not supported for this menu 😔

[@heynaik7732]

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

[@MakeDreamWebsite]

Thank you, I will 🙌

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

[@arlinn13]

whattt, is really nice tutorial, keep it update sirrr

[@MakeDreamWebsite]

Thank you, I will

[@aman64045]

Please more videos on this topic 👍❤️

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

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

[@sannykurniawan2681]

THANKS BROOO VERY COOOL

[@MakeDreamWebsite]

You are welcome!

[@se8ia]

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

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

[@YuliAlimuddin]

thank you for this great tutorial

[@MakeDreamWebsite]

You're welcome!

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

[@Aledany]

I must have elementor ( pro ) ?

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

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

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

[@AvinashPratap24]

Thank you very much bro... ❤

[@MakeDreamWebsite]

You're welcome!

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

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

[@daniloribeiro71]

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

[@MakeDreamWebsite]

de nada!

[@The.VoiceOfBengal]

Please help how I can prevent to not hide the nav bar after scrolling pages.. in mobile

[@MakeDreamWebsite]

Inside the css you can find a line where you can see opacity: 0; just remove that line

[@aymenbelhadj2925]

heloo, do you have the same tamplate for bricks ? i want to buy it pls

[@MakeDreamWebsite]

Right now, I only have Elementor version of this!

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

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

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

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

[@ambroseadodo]

I purchase d your bottom menu. i install and my home activities in buddyboss theme disapear, no means to reach you.

[@MakeDreamWebsite]

You can email me

[@sophiemulders]

Can you do this for the mobile version only?

[@MakeDreamWebsite]

Yes, you can. From the container, advanced tab, you can find the responsive section, from there you can hide it for desktop and tablet...

[@sophiemulders]

And i cant see the pasted html widget code very well and it is not on your site?

[@MakeDreamWebsite]

Yes, it's on my site...

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

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

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

[@meesamabbasi2928]

My header containing drop down and all isn’t showing after this bottom menu header? How can we have 2 header in the website? Please help

[@MakeDreamWebsite]

Inside your existing header template, you need to add this container...

[@MusicofShashi]

Can I use this menu to mobile only if yes plz say me how

[@MakeDreamWebsite]

Yes you can, you need to enable the hidden on desktop, tablet option from the container...

[@MusicofShashi]

@@MakeDreamWebsite thanks 👍

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

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

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

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

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

[@LioraAz]

Great video, keep them coming

[@MakeDreamWebsite]

Thank you!

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

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

[@fiteatsberlin]

Thank you very much for the video! Great content

[@MakeDreamWebsite]

You're welcome!

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

[@innocentgaffar4048]

Awesome 👍

[@MakeDreamWebsite]

Thanks a ton! 😁

[@Mikol3on]

NICE!

[@MakeDreamWebsite]

Thanks

[@openparachute17]

Thank you. It works.

[@MakeDreamWebsite]

Welcome 😄

[@Abdulrahman_hmh]

thank you, can you help me please, I've pay this template but it's not work, how can I fix it?

[@MakeDreamWebsite]

You can email me...

[@Abdulrahman_hmh]

@@MakeDreamWebsite ok I send it now

[@ericj5239]

As soon as i add the css code the menu shot over to the left of the page almost completely out of sight. Also my footer is also at the bottom which is really in the way. I followed directions exactly.

[@riyadhjerjo3393]

Great job! Thanks a lot.

[@MakeDreamWebsite]

Welcome! 😇

[@dronnlodhi7]

How can i add working search button ?

[@maditagency]

I have a problem with your code that I bought. It doesn't work when I move the mouse over it, I get no change.

[@MakeDreamWebsite]

You can email me....

[@cjcstudio6201]

Thank you😊

[@MakeDreamWebsite]

You're welcome!

[@shtreediraq]

Hello, I purchased the product and use it on multiple pages, but when I move from the main page to the other page, the bar disappears. I want to install it in place on all pages.

[@MakeDreamWebsite]

You need to add it as a header template. Even though it's not working you can email me

[@shtreediraq]

@@MakeDreamWebsite Please send me your email address

[@SazzGamingChannel]

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

[@MakeDreamWebsite]

You can email me…

[@mad7505]

I can't see an option to edit container and stick it to the bottom. Not sure if it's because Elementor has changed.

[@MakeDreamWebsite]

Probably.. You can also edit all the thing from the navigator view. Just right click and you get the Navigator option.

[@ISMAILSK-xb4ih]

Sir "icon-menu v3" not working properly, when the round purple 🟣 div moves to other icon, the icon disappeared suddenly and only purple 🟣 round div showing. Please help me to resolve this problem, I look forward to your positive response. Thank you. i also mail vai your website and gmail

[@MakeDreamWebsite]

I’ll get back to you via email

[@ISMAILSK-xb4ih]

@MakeDreamWebsite I am waiting sir your positive response .

[@mountee]

Looks great and I purchased your code, but when I scroll to the bottom of my page the menu I created like this with your instructions disappears, and then appears again when I scroll from the bottom, any ideas why? thanks

[@MakeDreamWebsite]

Yes, I intentionally do this, otherwise you can never see your website footer section...

[@mountee]

@@MakeDreamWebsite thanks for answering, is there anyway to disable that please?

[@MakeDreamWebsite]

@@mountee You can email me your page link...

[@maditagency]

I installed your code but when I test it there is no display in hover I see only before publishing and moreover there is a decallage when I pass the mouse on home it is about which is displayed when I pass the mouse on about it is service which is displayed how I can solve that

[@MakeDreamWebsite]

You can email me...

[@maditagency]

And it gives me a 500 error

[@MakeDreamWebsite]

@@maditagency ok for now you can send [e-mail]

[@sansayan01]

Not properly working on mobile interface. After tapping twice the navigaiton menu work.

[@MakeDreamWebsite]

Can you please email me. So I can figure out the issue...

[@mad7505]

Ok just bought the pre built template and I can't import the files from.the container folder. I keep getting an error. Already activated import unfiltered stuff. I was able to import the files in the Non container folder. But the widget keeps disappearing when I get to the bottom of the screen how can I turn that off? I need the menu to be visible the entire time.

[@MakeDreamWebsite]

Hi, I did that intentionally so people can get the chance to see and interact with the footer section. If you don't want that disappearing feature, you can email me...

[@mad7505]

@@MakeDreamWebsite ok will try to see if I can figure out if not I will email. Is your email on gumroad?

[@MakeDreamWebsite]

You can find the email on this channel's about section