Make this Icon Navigation Menu Bar like an App in Elementor/WordPress | Magic Menu Indicator
HTML-код
- Опубликовано: 6 ноя 2022
- 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:
makedreamwebsite.com/elemento...
✅Get code snippet for Elementor Icon Menu:
makedreamwebsite.com/make-thi...
✅Get this READY-MADE template on TEMPLATISH:
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.
Great Video! :-) Perhaps the greatest menu bar made in Elementor without any plugin I've ever seen! Thank you very much.
Very much thanks!
Absolutely stunning. Tbh you r the reason why I'm still interested in elementor
My pleasure! Thank you for inspiring me...
Wooooooooooooooooooow! That was incredible man
Thank youuuuuuuuuu!
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?
Great stuff Fahd. Cheers!
Very very appreciating your afford for this Super manu. Best I have ever had. ❤❤❤
Glad to hear that
Thanks for the tutorial....This makes a website really stand out, especially on mobile.
You're welcome😊
Seus tutoriais são incríveis, design de alto nível, muito obrigado por compartilhar...
de nada!
This guy is top notch.
Bro I can’t wait for a conditional logic form! Great video thanks
Thanks... Noted the topic.
It’s working great. Loving the design.🙏🏻
Glad you like it!
Awesome 👍 very useful tutorial thanks!
You're very welcome 🙏
Thank you very much for the video! Great content
You're welcome!
Great job! Thanks a lot.
Welcome! 😇
Awesome as always 😍
Thanks again!
Great video, keep them coming
Thank you!
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 :)
You're welcome! Happy to help you...
Nice...!!!! great tutorial, i love your work... congratulation.
You're welcome!
Thank you. It works.
Welcome 😄
bro you making awesome tutorials , keep doing more bro 💕💕
Thank you, I will 🙌
thank you for this great tutorial
You're welcome!
From today i'm your big fan. 🥰
🙏😇😇
Luv this!
Thanks a lot!
Awsome, thanks a lot !
Very welcome!
Please more videos on this topic 👍❤️
nice design, good video, thanks!
You're welcome!
Thank you very much bro... ❤
You're welcome!
bought it, thanks
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
Excellent content :)
Thanks a ton!!!
hi im having issue with the divider code. i have negative z index but still wont go behind the container.
whattt, is really nice tutorial, keep it update sirrr
Thank you, I will
Amazing and creating work bro❤️
Thanks a ton! 🙏
@@MakeDreamWebsite always learned new things from you💖 bro
Good work 🎉
Many many thanks
Thank you😊
You're welcome!
How would you move this header vertical on the left side of the screen with the icons placed underneath each other?
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.
thanks for this great video! but i have a problem when i active icon-menu v3, the active icon color is not changing
Thanks Brother ❤
You're welcome 😁
*Love It* 💌💌💌
😇😇
Hello brother, first of all, thank you very much. Secondly, I wanted to ask how to fix the issue where the icon disappears in the circle box that gets filled with color in v3 when hovering or active.
Awesome 👍
Thanks a ton! 😁
woww, subscribed
🙏🙏
Thanks
You're welcome!
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.
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
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
This is incredible!!!
Can I request scrollable version of this menu navigation please, for example the nav has more than 5 menu
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.
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?
You can me your page link...
@@MakeDreamWebsite Thanks I just did
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?
No it won't cause any issues
@@MakeDreamWebsite great, thanks for the quick reply
any tutorial in elemntor pro version? 😁 kinda different menu here in pro
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?
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.
NICE!
Thanks
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
You're welcome... Which version of Elementor do you use?
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?
You can email me your page link...
This is amazing ❤️ is it possible to add cart count to one of those icons? or any way i can buy that code/template from you? :)
The way the custom CSS is written, it's only works for Icon Box. If you want to do it with Add to Cart icon, you need to modify that CSS/Js code.
@@MakeDreamWebsite Hi! Can you give us the code so that the cart is updated when adding products? Thank you very much for the video!
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.
code for v3 didn't work?please help me there
bro, its not working on my site. I did this menu from scratch as you said. but still its not working.. any solutions ?
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 ?
You can email me...
@@MakeDreamWebsite I have the same problem. :o
I must have elementor ( pro ) ?
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?
You can try to insert it in the footer instead. Even then it won't work you can email me...
@@MakeDreamWebsite If it inserts codes into the footer, the theme footer disappears same as header. I sent you an email.
@@hyeonwoopark8049 Okay, you can send me email...
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?
If you search on the custom CSS you can see a line:- opacity: 0; Just remove that line
if you add this menu in your post, change the [data-elementor-type="wp-page"] to [data-elementor-type="wp-post"] in line - + 200
This code doesn't work. When i hover, the icon doesn't show icon popping up :(
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
Noted!
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?
Thank you for your support. You need to change the code for that... BTW you can email me
thank you! I just emailed you
@@MakeDreamWebsite
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
Same issue. I think there have something wrong with the code. Not sure
You all can email me
Thanks a lot for your kind reply sir, I just bought the template its very awesome and worth it.
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.
You can email me...
Nice. Interested to buy it. Can you make it slidable too?
Hi, sliding is not supported for this menu 😔
Damn Boye!
It's Amazing.
Most Useful for WordPress.
Without using plugin.😍😍😍
But Costly for Payment,
Dollar Chris.
Mostly Dual Currency Card Crysis.😢
You're welcome! You can follow the video if you don't want to purchase, they are exactly the same!
@@MakeDreamWebsite My Favourite is No.3 Design.
@@LVN10 you can use v3 class to achieve the 3rd one...
I see your library still says PRO, do you only use the Pro Elements plugin? without buying elementor pro?
As custom css is needed so Elementor pro is required here
does it necessarily require elementor or we can implement it using code snippets on other theme?
Yes, you can use any theme, but, Elementor and Elementor Pro plugins are needed
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.
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.
@@MakeDreamWebsite Did you make a tutorial for those that have the flexbox container?
@@AnthonyTilahun Yes, this one is for the flexbox container user...
Thanks for the excellent tutorial!
When I slide the page the icon is not active... Anchors are configured correctly. What may be the problem?
You can email me
@@MakeDreamWebsite I just sent an email through your website :)
if you add this menu in your post, change the [data-elementor-type="wp-page"] to [data-elementor-type="wp-post"] in line - + 200
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?
You can email me...
excellent video .. what label should each button have? or
These are wrapped inside div tagged automatically...
@@MakeDreamWebsite thank you so much
I just purchased the Elementor Icon Navigation Menu Bar from gumroad. But with IOS there is a problem, we need to double-tap the icons to be able to access the links.
Any fix for that?
You can email me your page link...
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
if you add this menu in your post, change the [data-elementor-type="wp-page"] to [data-elementor-type="wp-post"] in line - + 200
Hello! How can I use the menu for a site that consists of a main page (landing page) but also other pages, such as a blog page or an archive? I tried, but in the newly created pages the menu no longer works. Of course, it would be a solution to use the menu entries for both the separate pages and the first page as is normally used. Is this the only way I can use it for what I want to build?
You need to put the menu inside your header and set the display condition to entire website. So, it'll be visible for all the pages.
@@MakeDreamWebsite I tried that but it didn't work. It does work for elementor page, but not for blog post that using gutenberg.
Yes, you're right! I'll work if you created you write your blogs using Elementor@@Rilo708
New Subscriber here! Hi!
Thanks for subscribing!
@@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!
Glad to know that helps you!
does it necessary to have elementor pro version for working of this menu? Will it work in elementor free version?
As it require custom code and theme builder functionality so you need Elementor Pro.
Is elementro pro needed or can i use it also with element free?
As there are custom code needed so Elementor Pro is also required
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?
You need to put the id's inside your page's sections.
@@MakeDreamWebsite We did - in the CSS ID area under the Advanced tab and it still doesn't work
We also tried changing the HTML ID of the containers to sections and that did not work either.
@@PantheraPress did you have any solution for this? I am also having the same problem.
@@lepistol5262 please notif me if u get the solution bro, same problem here, thanks.
Thank you for the tip!
But I have a question,
how can I remove it safely?
I deleted the file, but apparently it didn't really got removed from live website; although in the editing page it's removed
Any changes I do in the website doesn't get applied in the live website because of the Navigation menu bar
I need your support please
If you open the navigator view, from there make sure you've deleted that container. That's it!
@@MakeDreamWebsite thats what I did but unfortunately nothing got changed. It's not the cache btw, the live website doesn't get change when I edit anything and publish it. In the editing page I can see the changes, but live page nothing gets change. I guess something has to do when it asked me to Confirm when I uploaded the plugin in the Theme
Can this be made just for mobile responsive ?
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.
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!
Nevermind. I changed it using the offset setting :-)
Is it possible to have ONE of them turned on by default?
@@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...
@@MakeDreamWebsite You ROCK!!!!!
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?
Pls answer this
Ok I'll update the code snippet to resolve it
Is it possible to set a gradient as background color or just a single color?
Gradient background color isn't possible in this case
@@MakeDreamWebsite Okay thanks :)
I have a bug, how can I contact you that I can ask you about it? :)
@@Darknature97 You can find my email on the About section
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
Inside your existing header template, you need to add this container...
hello please replica the Card Slider Widget of the powerpack plug-in, they are the only ones that have a Slider with the design that I want but they do not update to be compatible with the latest version of Elementor Pro. please create the Card Slider Widget
of that plugin ☺️
heloo, do you have the same tamplate for bricks ? i want to buy it pls
Right now, I only have Elementor version of this!
1 Number
Thanks 🙏🙏🙏
Are the menus (sidemenu and this kind of menu) compatible with each other?
Yes, It is...
@@MakeDreamWebsite thank you for the quick answer! keep up the good work!
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!
You need to go to the Advanced > Responsive settings of that container. Enable the option "Hide On Desktop"
@@MakeDreamWebsite ok thanks!!😉
I can't see an option to edit container and stick it to the bottom. Not sure if it's because Elementor has changed.
Probably.. You can also edit all the thing from the navigator view. Just right click and you get the Navigator option.
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?
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...
I like this, does it work with the free Elementor plugin?
I want to buy this templates
You need both Elementor and Elementor Pro to make it work!
Hi, would it work with 10 scrollable icons? I want to buy the Icon Menu. Thank you.
Yes, it would work with 10 icons, you just need to duplicate those icon box widget and cahnge the links, icons then
Thank you for your response, would the 10 icons remain on the same scroll-type line?@@MakeDreamWebsite
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.
You can email me....