Muy buena explicación no he visto a ningún youtuber con tanta maestría al explicar, muchas gracias, eres un fenómeno = Very good explanation, I haven't seen any RUclipsr with such mastery in explaining things. Thank you very much, you're amazing!
Very nice job and thank you for sharing. I tested it but I have an issue with the menu makes it impossible to click links that are underneath the area that the menu takes, in closed state. I tried adding pointer-events:none on .mdw-side-menu-area, but then the menu links don't work. Perhaps adding pointer-events:auto on a open selector, question is where. Anyone else have this issue?
What a fantastic effect! Congratulations and thank you for sharing it. I have one question: when I customize the social media icon list by changing the background or border, the list no longer remains hidden before clicking the menu button. If someone could show me the necessary code adjustments, that would be great.
My green background is not hiding after adding the HTML code. Can you tell me why please. Tell me it's urgent. I have applied this menu on my client's website and green background is not hiding.
hey there! great tutorial ! i did all the steps but the menu is not opening while the buttons switch and i only see a shadowy figure on top of button, aby idea how i can fix this ?
Fantastic Tutorial boss, I copied everything but in mobile something is not right for me, the button is taking extra width to y axis in mobile screen size as per the menu container size. So for me it's overflowing horizontally.
When I tried and repeated up to 3 in great detail, it was still the same and had errors when reviewing. does anyone have a solution? is this a code error or what?😅
@@UserX002 Yes, I've used GPT chat to check whether the HTML structure is the same as in the video or not. It's correct but it still doesn't work. What methods have you tried?
Hi there, thanks for the great tutorial. I've followed the instructions step by step, however it didn't work as it should. The Menu button shows correctly, but when click on it it changes but does not shows the menu container neither the close button. Any advise? By the way does this header works with Elementor flex containers? Thanks in advance
Great work! Was able to implement this, however, the arrows are the default one selected from icon list you used, and the spacing between the arrow and item name are overlapping and not hidden.
@@MakeDreamWebsite I thank you very much for the knowledge and your great ingenuity, what this comment says just happened to me, the arrows are by default those of Elementor and they do not change, and on mobile, they are not hidden, what solution would there be?
At the beginning of the custom code you can see the option -hide-on-scroll. You need to make it false to disable the hide functionality. On tablet it should work fine. I think you have done something wrong.
This is amazing. But I have an issue with the absolute position, that you set in 4:49 min. The container doesn't move when I set this, while in the video it moves to the left when you select the absolute position, then when you select right position in the horizontal orientation (here my container doesn't move position either and remains next to the logo). I started the tutorial many times to realize what was wrong in my settings, but everything is ok until this step. What could be wrong?
Do you have any video about conditional forms for elementor? I dont use elementor pro i use free version, and it seems like there are not many sources showing free method of adding conditions to Forms. ( well there are, but are complicated) Its very useful feature, so i though maybe you did already video about it.
Thanks for the great work! I built it via your video, but I bought the template to support your good job too. I had a question. For mobile, I would like to reduce the width of the menu when it opens, so it does not take the whole width of the screen but only 50% instead (so you can still see the left part of the screen). Which part of the code should I modify to achieve that?
Hey - how would I make the button transparent - every time I do this, it is the colour of the container (green) I want the button before clicked to be transparent?
That green colour you see is not actually the buttons colour. It’s the colour of that container. During the closed menu state, that container lays down behind the button to make the animation work properly. If you want to make that transparent, you need to write some extra code for that.
Fantastic tuto! not a coder and super happy with the result. Now I'm trying to custom it but have not find the way yet... I would like to have my regular menu on the top with the logo and as we start scrolling down it would fade away ( like the logo in your example) and the animated button would fade in. Is that possible?
@@MakeDreamWebsite Thanks for your answer. But how would I make the animated button from this tuto only appear when starting scrolling (is there a reveal-on-scroll action?) In my mind the idea is having a usual header that with transform in your animated button as we start scrolling
As I already made it with icon list widget so the submenu is not possible here. But, if many of you request for submenu version, I'll add a submenu supported version which I'll make using the nav menu widget. And I may add it with the template...
I have also checked it from Safari and it works well. May be you have done something wrong. Can you please recreate it again carefully without missing any steps...
Thank you! Actually the code snippet is specifically made for Elementor. To get the same result on Divi, you can use the similar logic from the code snippet but that code snippet will be different for Divi. I recommend you to contact a JavaScript developer who can made it for you and you can give him/her this video as a reference.
Your videos are so educational! You have a real talent for explaining complex ideas in an easy-to-understand way. Your content is so informative and well-researched. I always learn something new from your videos. Thank you for sharing your knowledge with us! Your videos are a great resource for anyone looking to learn about [topic]. You have a real gift for teaching through video. Your channel is a must-watch for anyone interested in [topic]. I appreciate all the hard work you put into making such informative videos. Your dedication to providing accurate and helpful information is inspiring.
Hello! I would like to buy the ready-made template. How can I make it so that when I click on an item in the menu, it closes? It is for a one-page website. Thank you very much.
I asked chatgpt to do it, and it worked. Thanks for your content! Can you tell me what I should study to be able to make that kind of animations on the web? Thanks.
Hi there, thank you so much for creating such amazing content, your explanations are easily understood. I just have one question, I would like to have an active and hover state color for the menu items, are you able to explain how I can accomplish this?
@@MakeDreamWebsite I am able to change the hover styles but unfortunately i don't see an option to show which page is active, I am only able to edit "normal" and "hover" not "active" and this will be for the icon list portion of the header.
Yes, you can’t add it from the default options. If you inspect element the menu items from the browser you can see the current page menu item has a special class name (nav-menu-item-current-page or something like that. I can’t remember the exact name at this moment). If you write some css based on that class then you can achieve that result.
@@MakeDreamWebsite Let me try that thank you, I also want to know if its possible to easily modify the code you provided to display the header as not sticky, it seems to be overriding my other css code.
@PrimeCoGlobal if you already have the template you can see there is also another version of the header which is not sticky. If you don’t have the template, you can also make it non sticky from the advanced tab of the header…
Great job, thanks. However, I have purchased the file, and it actually looking a bit weird. Not as good as in the tutorial. The arrows are not initially hidden, and while logged in, paddings are distorted. The latest version of elementor and Hello theme. thanks.
background overlay is not working on elementor and elementor pro like a bug how to fix? i see it once and when i refresh the page background overlay doesn't work
Hello, excelente video! I followed the steps to the letter but I have two errors: The button does not display the text in the mobile version. The button rotates 3 times when changed, and in your video, I see that the rotation is 2.
i just bought the menu n i implemented it but i hide it for desktop to only show for mobile users but the problem is that there is no header showing for desktop
Great stuff! I only have a problem with the fact that when the menu is hidden, it still somehow covers the logo. I can see the logo, but I can't click on it as a link. However, when I move the menu lower, the logo becomes clickable. Where is the problem? Once again, great job! You have talent!
I followed all the process step by step 3 times but the button doesn't work correctly, when I click on menu the animation starts but mde-side-menu remains hidden
@@MakeDreamWebsite I will double check all the steps and let you know, thanks for the reply. P.s. in the previous message it was the checker who changed mdw to mde
Great work. Looks fantastic! And you could even consider adding a few extra lines of code to make it accessible with :focus management, and aria-extended="true" / "false" and aria-hidden="true" / "false". That would really make it stand out! Cheers!
After a lot of requests, I have later created an another version of this menu with submenu support(even nested submenu) and I have added it with the template file…
I have also tested and see it from iPhone chrome and it works pretty well smoothly: template.makedreamwebsite.com/animated-side-menu-v1/ Can you please clear your all other background running apps and make sure you have enough charge so the device is not in low power mode…
I've purchased your menu (great work, by the way) and installed it on my site. However, I'm experiencing an issue: when navigating around my site, the green background disappears. Any ideas on how to fix this?
Hi thank you for this beautiful tutorial, i have a request that may be an improvement to your project if you'll be so kind to answer, i was trying to add an entrance animation to the "menu" button, but i found out that the container with the class ".mdw-side-menu", that has a overlay-background will remain visible under the Menu button, i have tried to modify your code but i was only able to hide it, setting the opacity to 0 and i am not able to show again the background-overlay, so when the menu is opened there is no background color; please would you be so kind to explain how to make this work? Thanks in advance
You can use the nav menu widget. But the code here is not compatible to properly work with the Nav Menu widget. For that the code need to be customised. Basically, you don't have to use the original WordPress menu. You can put your pages/other link directly from here.
I followed your tutorial on creating an animated header menu and successfully implemented it on my website. It looks fantastic, but I’m having trouble adding a submenu. I was wondering if there’s a free method to include a submenu in this Animated Side Menu.
Can you please check again that you have done everything right? Most probably you did mistake with the structure. Make sure it is as same as mine from the navigator panel.
hi, is this SEO friendly? I know that for a website to be SEO optimised that page needs to have a heirarchical structure with a clear navigation. The default wordpress menu element in elementor automatically adds the link to pages and also subpages. But with this one, I see I have to manually add the page links in the buttons. Im guessing we cant make a drop down with this menu, but would like to know if it impacts any technical SEO side of things if Im manually linking pages. Thankyou!
Hi, I can see after publishing the video many people ask for submenu support. So, I decided to create an additional version with the nav menu widget and include it with the ready template.
@@MakeDreamWebsite I bought this Template a few days ago but there is no nav menu version of the template included... Where can I get it now? Would really appreciate the help!
@@MakeDreamWebsite I always get asked to provide m wp-admin login. I dont want to give someone I dont know the access to my whole business website. Could you tell me when you include the updated version with the nav bar as a download? I think that would work better for me
@schtandin yes, I know it’s not an ideal solution to ask for wp-admin access. For some cases, I can just update the code snippet/template and that will work. But, there are some cases when issue occurs on a specific website for a specific reason. Then, we need to inspect it from the backend and try to resolve it. Technically there is no other way than doing this for that cases. Most people have trust on us and give their access without any hesitation. But, if anyone has trust issues, we recommend them to create a clone for the site and take that access to protect their main site from any risk. Btw, after giving access, in some rare cases if we failed to resolve the issue we happily take refund.
I've installed the template but when the menu is activated, for some reason, many elements on my website stop displaying, such as images, whole containers, etc. I don't know why. Whatever the template, it's the same thing.
After publishing the video I got a lot of requests to add the submenu option. So, I have created a separate version for that and add it with the ready template.
Awesome Tutorial. I'm learning alot of new tips and trick about Elementor for you. May I know what theme do you use for you sites to build with elementor? is it the default elementor "Hello Theme" or the Default WordPress Themes?
Hi there. I purchased the template from your site and install it on my website, but after elementor got update, your code is damaged now, how can you help me fix this? I reached out here because there was no contact or support in your website with templates. please let me know. thanks
@@MakeDreamWebsite yes, I bought the version on your site but I assure you that it is impossible to change the green background of the drop-down menu, as soon as I change it it makes a huge square in the middle of the page
I have followed the exact same instructions but there are two issues coming: 1. when clicked on menu, the text 'menu' doesn't change to 'close' 2. The icons ares always there and css code didn't brought any animation or any changes to it
You can see I have a mistake there. For the 2nd button the button text will be CLOSE which I didn't notice while making the menu but later mentioned as a annotation while editing. And for your 2nd issue please you can email me, I'll have a look!
Hello, I commented weeks ago and you said you would update the template with a SEO friendly native Elementor Navigation Menu. I have paied for the template but never got an answer from you.
I actually started following this channel because of the GSAP content....Please give us more GSAP and elementor content.
Great job, implementing GSAP will definitely boost your channel. Amazing work buddy
You're welcome!🥰
What's gsap?
Bravo, really clever, I am looking forward to trying this. Also giving us the code is very generous of you. Many thanks indeed.
You're very welcome!
I turned on all the notification setting I could for this channel!
Glad you like it so much!
Muy buena explicación no he visto a ningún youtuber con tanta maestría al explicar, muchas gracias, eres un fenómeno = Very good explanation, I haven't seen any RUclipsr with such mastery in explaining things. Thank you very much, you're amazing!
¡Un placer! Gracias a ti también.
Great video! I just need the code for the effect that the arrow appears when hovering over the text. Can you tell me what that is?
Very nice job and thank you for sharing. I tested it but I have an issue with the menu makes it impossible to click links that are underneath the area that the menu takes, in closed state. I tried adding pointer-events:none on .mdw-side-menu-area, but then the menu links don't work. Perhaps adding pointer-events:auto on a open selector, question is where. Anyone else have this issue?
@MakeDreamWebsite Same issue at my side... please suggest
Honeslty I did the one click install and it was so amazing, I think it really added value to my site, thank you very very much
Glad it really helps you!
Absolutely love your content. Notifications are ON! Great job!!😍
Glad you like it!
snippet code website is not loading
I can't get the code. Please provide me the snippet code
Thank you for your sharing, Mat I check Is there anyway to add the user login icon and shopping cart icon in the menu?
instead of the social list, i wanna add 2 button login and sign up, how can I achieve that?
Omg , Incredible man. Love it. you did a great work.
Thank you so much!
this is so good man! thanks a lot! just purchased your 2 assets!!
Glad you like them!
hi does the color effects the code func ? bec i choose diff placing for my menu and colors and when i add the code it doesn't work
What a fantastic effect! Congratulations and thank you for sharing it. I have one question: when I customize the social media icon list by changing the background or border, the list no longer remains hidden before clicking the menu button. If someone could show me the necessary code adjustments, that would be great.
My green background is not hiding after adding the HTML code. Can you tell me why please. Tell me it's urgent. I have applied this menu on my client's website and green background is not hiding.
hey there! great tutorial ! i did all the steps but the menu is not opening while the buttons switch and i only see a shadowy figure on top of button, aby idea how i can fix this ?
Can you please double check everything?
Fantastic Tutorial boss, I copied everything but in mobile something is not right for me, the button is taking extra width to y axis in mobile screen size as per the menu container size. So for me it's overflowing horizontally.
When I tried and repeated up to 3 in great detail, it was still the same and had errors when reviewing. does anyone have a solution? is this a code error or what?😅
Same here also then animation couldn't work and button also not working
@@UserX002 Yes, I've used GPT chat to check whether the HTML structure is the same as in the video or not. It's correct but it still doesn't work. What methods have you tried?
Can you email me your page link…
Hi, great video but i have a issue, when i click the menu button it doesnt show the menu and i did step by step. Thanks
Hi there, thanks for the great tutorial. I've followed the instructions step by step, however it didn't work as it should. The Menu button shows correctly, but when click on it it changes but does not shows the menu container neither the close button. Any advise? By the way does this header works with Elementor flex containers? Thanks in advance
Most probably you have done any mistake or do the wrong structure. Can you please check again? Yes, it’s made with flexbox container.
I'm having this same issue
Same issue here- I've double checked step-by-step
Do you find any salutation? I am also facing same problem.
Can you please email me
Great work! Was able to implement this, however, the arrows are the default one selected from icon list you used, and the spacing between the arrow and item name are overlapping and not hidden.
You can email me
Yes, you can control them from the css options at the top lines...
@@MakeDreamWebsite I did :)
@@MakeDreamWebsite I thank you very much for the knowledge and your great ingenuity, what this comment says just happened to me, the arrows are by default those of Elementor and they do not change, and on mobile, they are not hidden, what solution would there be?
@@MakeDreamWebsiteemailed you 😁
Great tutorial! How would I change the arrows thickness when they appear?
You need to increase the icon size from that icon list widget for that
@@MakeDreamWebsite Thankyou for the quick reply, I tried that first but only by a small amount. It's much bigger now thanks!!
Thank you for this video, but the menu is not acting properly on the tablet version. Also, I do not want to hide the logo how do I do it?
At the beginning of the custom code you can see the option -hide-on-scroll. You need to make it false to disable the hide functionality. On tablet it should work fine. I think you have done something wrong.
@@MakeDreamWebsite I have changed it to false but logo is still not showing
This is amazing. But I have an issue with the absolute position, that you set in 4:49 min. The container doesn't move when I set this, while in the video it moves to the left when you select the absolute position, then when you select right position in the horizontal orientation (here my container doesn't move position either and remains next to the logo). I started the tutorial many times to realize what was wrong in my settings, but everything is ok until this step. What could be wrong?
Is this only happens with that button or also with other elements?
@@MakeDreamWebsite thank you for your answer. So far, only with that button, I haven't been able to progress further in the tutorial.
@josue_mp you can email me your page link
Do you have any video about conditional forms for elementor? I dont use elementor pro i use free version, and it seems like there are not many sources showing free method of adding conditions to Forms. ( well there are, but are complicated)
Its very useful feature, so i though maybe you did already video about it.
Thanks for the great work! I built it via your video, but I bought the template to support your good job too. I had a question. For mobile, I would like to reduce the width of the menu when it opens, so it does not take the whole width of the screen but only 50% instead (so you can still see the left part of the screen). Which part of the code should I modify to achieve that?
You can email me. I’ll customise it for you!
I want to do it but in Divi, is it possible? I even pay to be guided in a better way
You can hire a JavaScript developer who also has knowledge about Divi and send him/her this video as a reference…
Hello! if i buy the menu i can run it only with elementor base? i use pro elements not elementor pro, i can use it?? thank you!
Yes, it will also work without Elementor Pro if you have header builder plugin
Hey, can I change the menu & close button with a menu icon & close icon?
Yes you can
Hey - how would I make the button transparent - every time I do this, it is the colour of the container (green) I want the button before clicked to be transparent?
That green colour you see is not actually the buttons colour. It’s the colour of that container. During the closed menu state, that container lays down behind the button to make the animation work properly. If you want to make that transparent, you need to write some extra code for that.
Excellent tutorial. Thank you.
You’re welcome!
Fantastic tuto! not a coder and super happy with the result. Now I'm trying to custom it but have not find the way yet... I would like to have my regular menu on the top with the logo and as we start scrolling down it would fade away ( like the logo in your example) and the animated button would fade in. Is that possible?
With your regular menu, you need to add the class hide-on-scroll
@@MakeDreamWebsite Thanks for your answer. But how would I make the animated button from this tuto only appear when starting scrolling (is there a reveal-on-scroll action?) In my mind the idea is having a usual header that with transform in your animated button as we start scrolling
You explain very well, teach incredible things and do an exceptional job. Congratulations, I have learned a lot with you
Thank you so much!😇
Excellent but how can I create a submenu item in it ?
You can apply this for only those menus which don't have submenus.
is it in a future plan to to the same with a submenu?
As I already made it with icon list widget so the submenu is not possible here. But, if many of you request for submenu version, I'll add a submenu supported version which I'll make using the nav menu widget. And I may add it with the template...
@@MakeDreamWebsite please make submenu item with this example
@@freizeitvereinursendorfe.v2670yes, I have just created a submenu support version and add it with the template…
Hello, great video! For some reason though the animation of the white box does not work properly on safari browser
I have also checked it from Safari and it works well. May be you have done something wrong. Can you please recreate it again carefully without missing any steps...
@@MakeDreamWebsite Never-mind found the problem! Sorry to bother you, thank you very much again!
Hi there, does this tut apply on Elementor free version?
If you manage to have a header builder plugin then it works on Elementor free
Great job, does it work without the flexbox container activated ? Thanks !
Yes, I have added a version with the ready template which work with the old section/column layout system.
This is great but I'd like to see it work with the default Wordpress Menu widget instead or in addition to the Icon list
Later with the ready template, I’ve added the version with default WordPress Nav Menu widget where you can add submenu too
Can we have sub menu implemented to? If so how?
After a lot of requests after publishing the video, I have also added an another version which supports submenu and add it with the ready template…
Do you support the Venmo payment option for your snippets?
You can email me…
this is great but no ideal for menus with sub menus. or is there a way around it?
Lot of you requested for the submenu version. So, I will add it with the template very soon!
Hi, after many requests finally I just updated the menu template and added the submenu support…
Hi i bought the template. It's great.
how do I change the open and close buttons to an image so the code will still work?
You can email me…
Subscribed. I love this menu. What would I need to change in the code to apply this in divi?
Thank you! Actually the code snippet is specifically made for Elementor. To get the same result on Divi, you can use the similar logic from the code snippet but that code snippet will be different for Divi. I recommend you to contact a JavaScript developer who can made it for you and you can give him/her this video as a reference.
@@MakeDreamWebsite thanks
Your videos are so educational!
You have a real talent for explaining complex ideas in an easy-to-understand way.
Your content is so informative and well-researched.
I always learn something new from your videos.
Thank you for sharing your knowledge with us!
Your videos are a great resource for anyone looking to learn about [topic].
You have a real gift for teaching through video.
Your channel is a must-watch for anyone interested in [topic].
I appreciate all the hard work you put into making such informative videos.
Your dedication to providing accurate and helpful information is inspiring.
Thank you so much for such appreciation. That inspire me more!
thank you so much. please I would like to see a cideo about making forms for orders
I bought the template. Is it possible to replace the buttons by icons?
Yes, you can. But, you need to change the code for that. You can email me...
Hello! I would like to buy the ready-made template. How can I make it so that when I click on an item in the menu, it closes? It is for a one-page website. Thank you very much.
When you purchase you can email me. I’ll make that customisation…
I asked chatgpt to do it, and it worked. Thanks for your content!
Can you tell me what I should study to be able to make that kind of animations on the web? Thanks.
You need the knowledge of html, css, javascript and a lot of practice actually!
Hi there, thank you so much for creating such amazing content, your explanations are easily understood. I just have one question, I would like to have an active and hover state color for the menu items, are you able to explain how I can accomplish this?
You’re welcome! On the style tab of a nav menu widget, you can see the option of setting the colour both for hover and active state.
@@MakeDreamWebsite I am able to change the hover styles but unfortunately i don't see an option to show which page is active, I am only able to edit "normal" and "hover" not "active" and this will be for the icon list portion of the header.
Yes, you can’t add it from the default options. If you inspect element the menu items from the browser you can see the current page menu item has a special class name (nav-menu-item-current-page or something like that. I can’t remember the exact name at this moment). If you write some css based on that class then you can achieve that result.
@@MakeDreamWebsite Let me try that thank you, I also want to know if its possible to easily modify the code you provided to display the header as not sticky, it seems to be overriding my other css code.
@PrimeCoGlobal if you already have the template you can see there is also another version of the header which is not sticky. If you don’t have the template, you can also make it non sticky from the advanced tab of the header…
Great job, thanks. However, I have purchased the file, and it actually looking a bit weird. Not as good as in the tutorial. The arrows are not initially hidden, and while logged in, paddings are distorted. The latest version of elementor and Hello theme. thanks.
You can email me. I'll have a look on that issue and update the code and template if needed
@@MakeDreamWebsite ok
@@MakeDreamWebsite what email can i email you?
It's contact@makedreamwebsite.com
Quick question, I just notice that the menu does not work on any other page but home page. Any suggestion? Thanks!
You can email me…
background overlay is not working on elementor and elementor pro like a bug how to fix? i see it once and when i refresh the page background overlay doesn't work
Have you set it as background overlay?
@@MakeDreamWebsite yes i set it as background overlay
its just show nothing
after one refresh
TREMENDO TRABAJO, INCREIBLE, MUCHAS GRACIAS POR TODO LO QUE ENSEÑAS ERES GENIAL.
bienvenido
Hello, excelente video!
I followed the steps to the letter but I have two errors:
The button does not display the text in the mobile version.
The button rotates 3 times when changed, and in your video, I see that the rotation is 2.
You can email me. I'll have a look...
can you pls upload a video on button rotating border effect so that we can apply custom css code in elementor.
i just bought the menu n i implemented it but i hide it for desktop to only show for mobile users but the problem is that there is no header showing for desktop
You can create another header under that section and show that only for desktop, tablet from its responsive option...
@@MakeDreamWebsitealright thank you.
When i imported this to another website drop-down menu's background became transparent... :(
beacuse of elementor update
Can you email me so I can solve the issue globally?
Great stuff!
I only have a problem with the fact that when the menu is hidden, it still somehow covers the logo. I can see the logo, but I can't click on it as a link. However, when I move the menu lower, the logo becomes clickable. Where is the problem?
Once again, great job! You have talent!
I think the issue is related to z index. Try to make the z index of the logo to 1000 hope it will work.
Really nice and creative tutorial. Thans!!!
You're very welcome!
when I put the button container to the right the button disappears..
Can you please make sure you have done everything right? specially the CSS class name and the containers structure?
I followed all the process step by step 3 times but the button doesn't work correctly, when I click on menu the animation starts but mde-side-menu remains hidden
Furthermore, despite the higher index on Elementor, the buttons are not in the foreground compared to mde-side-menu
Can you please check all the classes and everything. I think you misspelled mde instead of mdw
@@MakeDreamWebsite I will double check all the steps and let you know, thanks for the reply.
P.s. in the previous message it was the checker who changed mdw to mde
This was Killer!
Thank you
I have a problem where the Close button has no padding except when in desktop view
You probably missed something or do something incorrect. Can you please check everything properly?
Great work. Looks fantastic!
And you could even consider adding a few extra lines of code to make it accessible with :focus management, and aria-extended="true" / "false" and aria-hidden="true" / "false". That would really make it stand out!
Cheers!
Thanks for the tips!
Thanks so much for this brother👊🏼 you’ve really helped us improve our design❤
Glad to help you❤️
Good Job man Keep going
Thanks 🔥
is possible to give word press menu instead od icon list i would love to have it with droplist
After a lot of requests after publishing this video, I have also added that functionality and add it as a separate version with the template…
@@MakeDreamWebsite where i can find it i would like to have it
You can get the 1 click install template link in the video description
@@MakeDreamWebsite and wich one of this four templates will work for droplist?
Can you remake this for Bricks?
how do you link the menu text to a page?
@@lushprod You can put the page link for that items
Any idea how to add subpages? For example Blog -> South America -> Peru?
After a lot of requests, I have later created an another version of this menu with submenu support(even nested submenu) and I have added it with the template file…
@@MakeDreamWebsite Thank you very much for your fast answer! Just bought it:)
You’re welcome!
#MakeDreamWebsite Sir can I use this only for mobile users? Can it be possible? Please let me know 🥺
Yes, you can. For the top level container, hide it from the desktop and tablet from the Advanced tab > Responsive option.
@@MakeDreamWebsite Thank You so much Sir 😊
it's awesome thank you!! For valuable content.
You’re welcome!
I bought it and is amazing yet it is very laggy sometimes on mobile while working on desktop fluently. What could be the issue here?
Can you please mention the affected device and browser name?
@@MakeDreamWebsite iPhone/Safari, also tried it on Chrome and Firefox.
I have also tested and see it from iPhone chrome and it works pretty well smoothly: template.makedreamwebsite.com/animated-side-menu-v1/ Can you please clear your all other background running apps and make sure you have enough charge so the device is not in low power mode…
Hi, can this menu be used for mobile only somehow? Thanks!
Yes, if you hide it from desktop and tablet from the responsive option, then it will be only showing on mobile…
@@MakeDreamWebsite Thank you!
I've purchased your menu (great work, by the way) and installed it on my site. However, I'm experiencing an issue: when navigating around my site, the green background disappears. Any ideas on how to fix this?
Can you please email me. I'll have a look!
@@MakeDreamWebsite thanks :-)
Truly good work!!!!
Thanks 🙏
Hi thank you for this beautiful tutorial, i have a request that may be an improvement to your project if you'll be so kind to answer, i was trying to add an entrance animation to the "menu" button, but i found out that the container with the class ".mdw-side-menu", that has a overlay-background will remain visible under the Menu button, i have tried to modify your code but i was only able to hide it, setting the opacity to 0 and i am not able to show again the background-overlay, so when the menu is opened there is no background color; please would you be so kind to explain how to make this work? Thanks in advance
Yes, that background overlay can be initially hidden while your entrance animation happens. Actually that needs some more lines of code.
@@MakeDreamWebsite Can you give those lines of code. i am having the same issue
@MakeDreamWebsite could you be so kind? i haven't find a solution yet
thanks you so much. Now how can i link the menu created in your tutorial to the real menu of my website?
You can use the nav menu widget. But the code here is not compatible to properly work with the Nav Menu widget. For that the code need to be customised. Basically, you don't have to use the original WordPress menu. You can put your pages/other link directly from here.
Hi, I just created another version of my menu and add it with the template where you can add the actual WordPress menu with submenu support…
I followed your tutorial on creating an animated header menu and successfully implemented it on my website. It looks fantastic, but I’m having trouble adding a submenu. I was wondering if there’s a free method to include a submenu in this Animated Side Menu.
After uploading the video, lot of people requested for a submenu version. So, finally I have added that version with the ready made templates.
@@MakeDreamWebsite Is this available in the free version or i want to purchase the template?
@@MakeDreamWebsite Any update please let me know 🥲
As there is submenu so I used the Nav Menu widget of Elementor Pro. So, Elementor Pro is required if you want to use the submenu version.
After pasting the codes. The animations didn't work. The full design is visible. What do I do now ?
Can you please check again that you have done everything right? Most probably you did mistake with the structure. Make sure it is as same as mine from the navigator panel.
hi,
is this SEO friendly?
I know that for a website to be SEO optimised that page needs to have a heirarchical structure with a clear navigation. The default wordpress menu element in elementor automatically adds the link to pages and also subpages. But with this one, I see I have to manually add the page links in the buttons.
Im guessing we cant make a drop down with this menu, but would like to know if it impacts any technical SEO side of things if Im manually linking pages.
Thankyou!
Hi, I can see after publishing the video many people ask for submenu support. So, I decided to create an additional version with the nav menu widget and include it with the ready template.
@@MakeDreamWebsite I bought this Template a few days ago but there is no nav menu version of the template included... Where can I get it now? Would really appreciate the help!
I haven’t made it yet ready. Sorry for the delay. You can email me. For now I would like to make it directly on your website…
@@MakeDreamWebsite I always get asked to provide m wp-admin login. I dont want to give someone I dont know the access to my whole business website. Could you tell me when you include the updated version with the nav bar as a download? I think that would work better for me
@schtandin yes, I know it’s not an ideal solution to ask for wp-admin access. For some cases, I can just update the code snippet/template and that will work. But, there are some cases when issue occurs on a specific website for a specific reason. Then, we need to inspect it from the backend and try to resolve it. Technically there is no other way than doing this for that cases. Most people have trust on us and give their access without any hesitation. But, if anyone has trust issues, we recommend them to create a clone for the site and take that access to protect their main site from any risk. Btw, after giving access, in some rare cases if we failed to resolve the issue we happily take refund.
hello i got your slider template, but it doesnt pause on hover in mobile and ipad view
As there is no mouse or trackpad on mobile, so there is nothing called hover there. You can consider tap as hover for mobile…
@@MakeDreamWebsite i eamn it doesnt pause, like it does on desktop...
just one word, wooowwww. Thank you..
Thanks a ton!
I've installed the template but when the menu is activated, for some reason, many elements on my website stop displaying, such as images, whole containers, etc. I don't know why. Whatever the template, it's the same thing.
You can email me the affected pages’ link. I’ll have a look
@@MakeDreamWebsite give me your email please. All the Website is Affected in fact
@@MakeDreamWebsite share your email adress please
The menu stops working when I preview it. I have emailed you about the issue. I hope you will help me out with the bug.
Okay, I'll have a look
How can you add submenu? Please help me
After publishing the video I got a lot of requests to add the submenu option. So, I have created a separate version for that and add it with the ready template.
Beautiful one! Thanks for sharing
You're welcome!
Awesome Tutorial. I'm learning alot of new tips and trick about Elementor for you. May I know what theme do you use for you sites to build with elementor? is it the default elementor "Hello Theme" or the Default WordPress Themes?
You can use hello theme or other themes, but I used astra theme.
Hi, I purchased this template. When scroll down the logo wasn’t working in transition but disappeared suddenly. Could you fix this error?
I think something is conflicting with it. Can you please email me your website link? I'll resolve it...
@@MakeDreamWebsite It occurs even when import in blank page
I see… if you email me the page link, I can inspect the reason why it’s occurs on your site…
Puedes hacer uno parecido pero para un menú que tenga subcategorias ?
That need to be done with Elementor Nav Menu widget and also the code need to be changed for it! Then it will also support submenu.
Hi, after many requests I just updated the menu template and added the submenu support option.
Hi there. I purchased the template from your site and install it on my website, but after elementor got update, your code is damaged now, how can you help me fix this? I reached out here because there was no contact or support in your website with templates. please let me know. thanks
There is an email which linked to this youtube channel. You can email me there
@@MakeDreamWebsite Thank you , I added some JS and CSS to it and I fixed It.
Awesome 🤩
@@shahabdarougheha1627 What was your issue? I have the same problem and I am trying to solve it. In my case the background is totally transparent.
A M A Z I N G!!! Thank you!
You're welcome!
I tried following your steps and even buying the json files and importing, but none of them works. I don't know what's wrong on my side
You can email me. I’ll have a look!
Hi, I'm working with sections and I can't change the menu background colours. Can you help me? Thanks bro
I have made all the versions with sections/columns too and add it with the ready template...
@@MakeDreamWebsite yes, I bought the version on your site but I assure you that it is impossible to change the green background of the drop-down menu, as soon as I change it it makes a huge square in the middle of the page
@ShiroganeM you need to edit it from the background overlay option. For more instructions, you can follow the pdf file.
@@MakeDreamWebsite it works! thanks bro
I have followed the exact same instructions but there are two issues coming:
1. when clicked on menu, the text 'menu' doesn't change to 'close'
2. The icons ares always there and css code didn't brought any animation or any changes to it
You can see I have a mistake there. For the 2nd button the button text will be CLOSE which I didn't notice while making the menu but later mentioned as a annotation while editing. And for your 2nd issue please you can email me, I'll have a look!
@@MakeDreamWebsite Same for me as well, Menu is not hiding and it is still there on page load
I have resolved the issue and update the code snippet on my website...
@@Techy_za You can email me your page link...
@@MakeDreamWebsite I tried the latest code but it is still same for me, I sent you an email as well you can check that
Thanks
Thanks again, Somewhere i have an issue because it was not working to I purchased it. I learned a lot, again!!
You can email me
@@MakeDreamWebsite thanks I still have it in my drafts
Hello, I bought a product from your store, but I have a problem, it is the animated menu. I wrote to your home page but I didn't receive a response
Can you please email me
@@MakeDreamWebsite send me ur email pls
@@MakeDreamWebsite I already did it, thank you very much
Hello, I commented weeks ago and you said you would update the template with a SEO friendly native Elementor Navigation Menu. I have paied for the template but never got an answer from you.
Sorry about the delay. I’ll let you know as soon as it is ready.
@@MakeDreamWebsiteyou said this 4 weeks ago already… Can you give me a broad time frame? I want to go online with my website and am waiting for this.
@@MakeDreamWebsite This is some advanced scamming you are doing. great job!
Wowww, you should post daily videos!!!
I will try!