Off-canvas Menu in Elementor PRO
HTML-код
- Опубликовано: 14 окт 2019
- Are you keen to know how easy it is to create the off-canvas menu with Elementor PRO?
It takes very little effort to switch from horizontal to vertical navigation that works on each and every device. Such navigation doesn’t need to deal with responsiveness and makes your site header clean. Instead of the classic horizontal navigation, there will be a button that triggers the appearance of the menu. You can also use your off-canvas “thing” as a sidebar and fill it up with all kinds of data; links to the social profiles, maybe an address, recent posts, google ads - whatever suits your needs. Either way, I hope you’ll find this tutorial useful.
Thumbnail credits:
Freepik: www.freepik.com/free-photos-v...
**** To watch next: Horizontal to the off-canvas menu in Elementor PRO ****
• Horizontal to the off-... 
Хобби
Really can not appreciate enough these high quality tuts. 👍, I hope one day you become able to do videos more often, thank you!
Well done! You have a clear concise way of explaining things. I look forward to more videos from you.
Thank you OB! I came back and watched the tutorial again! The way you explained it made me feeling going back to school again and I totally enjoyed it!
Straight forward and very useful.
appreciate the way you say menu - its great
Please keep helping us all the time, Thank you
Thanks for a great tutorial and for also mentioning the bugs and how to work around them.
At the end, you mentioned about not being able to think of any drawbacks to a ham'bar'ger menu on the desktop. One is that people have to click two buttons to get to a page. First the menu button and then the place where they want to go.
Thanks again. Much appreciation.
👍
Thank you for the nice tutorial, keep up the great work!
love your explanations and clear instructions, thank you for the wonderful vids!
This was hugely useful in helping me replace the pretty bad default menu options with a nice hamburger slide-in - thank you so much for the time and effort making this video.
This was brilliant, been looking for this tutorial for a while. Many thanks
Fantastic I love your teaching style. God bless you & Big thank you
Excellent Tutorial! Really helpful. Thank you so much!!
I would have liked to seen it being used on mobile/tablet just to see it. Great job. The style was really dark and clashy imho because i would never design that black menu but it was completely viewable as a tutorial. Thanks.
great tutorial. I appreciate your humor.
thank you, great value, subscribed.
Excellent video. Very well explained and super useful. Thanks
Great job. This is an awesome tutorial.
I'm so glad I came across your channel. Thank you so much for this. Great tutorial!
Glad to read it was helpful!
Another great tutorial. Thanks!
Hi ! Clear & Simple, it was helpful, thanks ! Keep doing good tuts like this please :)
Thank you, works perfectly
beautiful tutorial
Very well done 👍 Thanks so much!
Awesome! Great guide!
10:05 Anyone who don't know how to access the Popup Settings should watch this first. Thank you for the tutorial.
Thanks buddy!
Thanks man, was looking for this!
The quality of your tutorial was without equal.
Thank you for the clear and structured tutorial !!!
Best Regards from FRANCE.
Thanks, buddy! Greets back to France!
Exactly what I was looking for! Thank you!!!
Glad I could help!
Super helpful!! Thanks so much
Very comprehensive tutorial! Thanks a lot!
You're very welcome!
@@OoohBoi Thank you so much! Good Luck!
You saved the day again! I had missed that the type should be Drop Down. I wish there was easier control of the second tier of navigation, to make it smaller.
Excellent tutorial, very clear - Thank you
Glad it was helpful!
This was super helpful! I was trying to start working on another section of my website when your video was suggested to me. I thought to myself, "what the heck, I need to make one of these menus anyways so ill try out the video". Turns out, your channel is super helpful and has been very impactful for my development work tonight. Thank you so much!
Thanks for the feedback... and thanks for watching!
great video and I love the explanations as you're working, great teaching method Oooh Boi
Thank you a lot for the video!! I really appreciate it :)
Man this is exactly what I've been looking for! The tutorial is excellent.
Glad it helped!
This is so amazing! Thank you!
Exactly what I was looking for. Thank you for this great tutorial. 👍
Glad it was helpful!
Amazing work ✨💫
Really can not appreciate enough these informational videos. About how to create a slider menu in WordPress using elementor. I watched hardly 30 videos but those were not informative as this video.
Doing great man. Thanks for your valuable support.
Oh Boy...!! Excelente... Muchas Gracias!!!
this is really awesome tutorial for us...
If I had found this hours ago it would have saved me.... well... hours. THANK YOU!!!
Thank you. Great tutorial :)
Finally! As a newbie to WP design, I went through so many other tutorials to accomplish a desired result...that this tutorial takes me from beginning to end in a very understandable manner! Thanks so much!!
Glad it helped, and welcome!
Thank you. It's a helpful tutorial.
Glad you think so!
Great video! Thank you for sharing.
Thanks for watching!
Thank you very much! This is certainly very interesting and pretty darn cool. The part where you give your feedback on the advantages and the drawbacks is really interesting. I don't believe I have ever heard any one else giving that type of input. We'd really like some more videos man! Hook it up, bro!
Glad it was helpful, thanks for watching!
Super helpfull
Thanks buddy!! I was looking for this solution for over a month now. What a relief that I found your video.
Glad I could help!
thanks so much for this video. you are an excellent teacher. : )
I love your video. This is the First video I watched from your channel. I earnd $80 for implementinh the offcanvas menu on my client website. Thank you!
Awesome video bro 👌 Keep up the good work going 💪👍
You are TOP! Many thanks my friend!
Glad to help!
This was super helpful - thank you so much for this. Even though Elementor has made a few changes to the UI since you filmed this, I was still able to get a fantastic looking menu on my DIY website.
Glad it was helpful!
Great as always.Thank You!
Thanks for watching!
Hey, man was stuck on this for like 2 days. My Off-Canvas menu wasn't working on Mobile particularly. You really saved me.
Thanks.
Oh, I'm glad to read if I did!
Excelent tutorial bro!!! Thanx!!
Glad you liked it!
Just saved my day 💜
Great Video and Loved
Glad you enjoyed it
Thank you so much, you are incredible!
You're very welcome!
what a tutorial thank you so much God bless you
Glad it was helpful!
Thanks very much his was very helpful👍👍
your channel is the bessssst
JUST AMAZING!
Hi, I'm loving all the high quality tutorials. Do you have any idea why on my phone the off canvas menu appears at the bottom of the page instead of where I click on the menu button?
I had to comment after leaving a critical comment on the music in the other (newer?) side bar menu. This is the way ALL videos should be done. Your content is too good to have to compete with any mind numbing music loop. This video was thoroughly enjoyable!
There you go! It's always sunny after the rain...
very helpfull really looking for it and u made my thank you soo much with my heart
I'm so glad!
Great Tutorial man! You saved me a couple of hours !! I did click on the bell :D
Awesome, thank you!
It helped me a lot!
Using this in 2022. Thank you!
Great stuff. Im ur fan and utilising elementor with ur videos. Thank you for your works. 🙏
Awesome, thank you on the feedback!
Amazing. Thank you!!!
You're so welcome!
Top notch tutorial again, Thank you!
One thing that bothers me is that the nav menu isn't showing up in the page code as long as the pop up isn't activated.
So SEO wise a big no go.
Is there a workaround for this issue perhaps?
Only clumsy workaround that I can think about is to hide the original menu by using the Z index, but I'm not sure if Google might penaltize that cos it's hidden.
awesome vid thanks!!
Hey mate :) Great vids, keep it up! May I ask if it is possible that the canvas/popup closes automatically once a line item is getting clicked in it? Or will the popup always have to get closed via chevron or other icon?
Thanks for the tips :)
Great this is what i was looking for couple of days. thank you soo much for putting such great efforts many thanks.
Bien hecho! felicidadades! gracias
Thanks Boi, nice tips!!!
Thanks. I worked.
….belated new year greetings sir 🙏🏾 😃 Just brilliant! Keep up the good work. Currently using Betheme, 🤔 with Elementor Pro & Blocksy 😂 “..busy man here” 😉 But I’ve always wondered how to customise your off canvas menu via Betheme 😫 “Guess I know now” Thanks Again ‘OB’ 🙏🏾👊🏾
Exactly what I needed x
Awesome, thanks for watching!
"HamBARger icon" !!! Haaaa! Love it!
This video is amazing
Very Nice Video. Thank You:)
Glad you liked it!
Awesome! thank you!!! .))))
great work
Thanks!
Amazing 🤩
As always great work. Like this short & sweet tech stuff. What's next?
Thanks! The next one? We'll see...👽
Hi, it's great ... I hope I applied it well ...
I hope so too!
Thank you so much for your in depth tutorial. It's really helped me - particularly with the ghost background thing! Wonder if you could help me... Is there a way to have submenu items expanded by default?
Thanks! As for the question of yours ... I guess there is a way, however, the most likely it does include the specific JS hook ( code.elementor.com/js-hooks/ ). You can't control the javascript-based menu by using CSS code.
Thank you!
tank you so much for tutorial.
You are welcome!
Thank you so much dude
Happy to help
@@OoohBoi 😘
Tks so much man!
Very good tutorial, thank you very much. When using the fade in right and fade out right animations for the popup side menu I now and then notice flickering at the end of the fade out right animation. Does somebody else have this problem too? The menu shortly flickers at the position where the menu has been when it was fully visible. The menu slides away and when gone the flickering happens. I have tried different browsers. It happens on mobile and tablet not on the desktop.
Thank you 👍
Great stuff. Thanks
What’s the game type noise background?
It’s a good choice, not distracting but fills in the silence ( and good for Bluetooth)
I found it quite relaxing so would like to have it on in background while I’m working and not watching your vids!
This is just what I was looking for, thanks for explaining it so well. One thing, mypopup isn't fading or sliding in, it's just appearing. Any idea why that might be?
Again, an outstanding video with content that cannot be found anywhere else. Thanks. One question: Will popup blockers block an off canvas menu as the one from this example?
Thanks! Here you are not dealing with the popup window that is the browser object. This is so called modal window so no worries about blockers.