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.
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.
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!
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!!
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. 👍
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.
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!
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!
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!
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.
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.
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!
So i am having some issues with linking popup on button. when ever i click on that wrench and try to type name of my popup whole box disappear. any reason why i am having this issue?
….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’ 🙏🏾👊🏾
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.
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!
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?
Hi There, Great Video! I'm using a single-page layout and want the canvas / pop-up to close automatically when a line item is selected. Looking forward to your feedback, Thanks in advance
One issue I can foresee with this method, of creating a custom menu is that adblock extensions could block it from opening. But overall a very creative and clean solution.
I'm just trying to wrap my head around this one... if something is fixed then it can be full-height only when the viewport reaches its actual height, it's the limited size content inside the flexible context. So, the "fixed full height sidebar menu header" should be what exactly?
@@OoohBoi Thanks for your quick response and for your work! Actually I got it done using Sticky Anything plugin and Popup assigned as a sidebar section with vertical menu. So I used left column, made it sticky and in full height 100vh, and created it as single page template like in this video ruclips.net/video/1cScCjyAwJE/видео.html But I was wondering is there a way to make header template act as a sidebar across website?
@@marbak1505 Ahhh, OK, now I've got the point! Theoretically, you could turn the header into the sidebar, I don't see why not, however... there's always a catch. And the catch is the HTML structure of the WP theme itself. Think of it in terms of the Section and Columns (I'm trying to use the metaphor, it's not literal); HEADER is like the top-most section that you're trying to drive-in next to the main content (section) and above the footer (another section). Does that help?
@@OoohBoi Thanks, got it! Header will always be header literally and it should stay that way. I overlooked basics :) My need was to have vertical main menu in fixed sidebar as template across website. Only way to achieve that is to use canvas template for pages + sticky column. Thank you for making it clear to me and reverting me to right track. If you could create best solution for that kind of layout one day, it would be helpful for many I think.
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?
At 12:28 you click the edit with Elementor and select to edit your header. Mine does not have the header option. Where did that come from? Was there a step that was skipped over? Now I'm just sitting here and not able to go any further. Everything was going perfectly until then. :O I watched another video that did this same thing. Where in the world is this header coming from?
The UI has changed at some point. I don't see the "popup settings" title at the top of the settings area. The Layout Settings just looks like any other template settings and there is no 'overlay' or 'close button'. To see these settings, you need to click on the settings sprocket down in the left corner, now.
I don't think you can, there's a great chance for a popup to cover the trigger button and send the popup back to where it was initially. And thus create some crazy back-and-forth shit...
@@OoohBoi I've managed to make it work, but the only way to close the popup is by clicking the close button or on the overlay. I used a tutorial from "elementor codes"
Do you have any information on the horizontal arrow showing different directions once clicked? Currently, the Sub menu arrow only shows itself pointing in one direction, down. I would like the arrow to point to the right when the sub-menu is closed/collapsed and the arrow points down when the sub-menu is open/expanded. How can I do that?
Great step by step instructions!! Someone on an elementor fb page suggested I get rid of my dropdown menu and do this. I have a fair amount of drop down menus so I'll play with this and see if it looks better than what I have now...OH you were super fast with the picture below the menu. Any suggestions for what a shrink can do to perk up the menu (OH...I'm colorblind AND being creative on websites is tricky. Any advice from anyone appreciated! Xx
So all works perfect but then when I go to use on my actual mobile device, it’s appearing on the left hand side without any animation or even a exit button. Can you help?
Спасибо бро! Крутые уроки у тебя! Единственный минус такого меню, на мой взгляд, на широких мониторах пользователю придется поворачивать голову вправо, а люди ленивы.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
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!
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.
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.
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...
If I had found this hours ago it would have saved me.... well... hours. THANK YOU!!!
Really can not appreciate enough these high quality tuts. 👍, I hope one day you become able to do videos more often, thank you!
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!
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.
👍
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!
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.
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!
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!
Hello, nice video as usual. Since we use a pop-up to display the main menu, does it bad for the SEO of our website? Thank you and take care 🙂
That's not a Browser popup, it's an element of DOM and as such it can only bring more value to the SEO.
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!
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!
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.
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!
This was brilliant, been looking for this tutorial for a while. Many thanks
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.
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
Please keep helping us all the time, Thank you
appreciate the way you say menu - its great
I'm so glad I came across your channel. Thank you so much for this. Great tutorial!
Glad to read it was helpful!
Very comprehensive tutorial! Thanks a lot!
You're very welcome!
@@OoohBoi Thank you so much! Good Luck!
Fantastic I love your teaching style. God bless you & Big thank you
Straight forward and very useful.
Man this is exactly what I've been looking for! The tutorial is excellent.
Glad it helped!
love your explanations and clear instructions, thank you for the wonderful vids!
Excellent tutorial, very clear - Thank you
Glad it was helpful!
Thank you for the nice tutorial, keep up the great work!
Excellent video. Very well explained and super useful. Thanks
"HamBARger icon" !!! Haaaa! Love it!
Well done! You have a clear concise way of explaining things. I look forward to more videos from you.
So i am having some issues with linking popup on button. when ever i click on that wrench and try to type name of my popup whole box disappear. any reason why i am having this issue?
Hi ! Clear & Simple, it was helpful, thanks ! Keep doing good tuts like this please :)
Exactly what I was looking for. Thank you for this great tutorial. 👍
Glad it was helpful!
Great Tutorial man! You saved me a couple of hours !! I did click on the bell :D
Awesome, thank you!
As always great work. Like this short & sweet tech stuff. What's next?
Thanks! The next one? We'll see...👽
Exactly what I was looking for! Thank you!!!
Glad I could help!
Excellent Tutorial! Really helpful. Thank you so much!!
….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’ 🙏🏾👊🏾
great tutorial. I appreciate your humor.
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!
beautiful tutorial
great video and I love the explanations as you're working, great teaching method Oooh Boi
Thank you so much, this was awesome, really helped me out a lot :)
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!
thanks so much for this video. you are an excellent teacher. : )
thank you, great value, subscribed.
Awesome! Great guide!
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?
Thank you. It's a helpful tutorial.
Glad you think so!
This is so amazing! Thank you!
Great job. This is an awesome tutorial.
Great this is what i was looking for couple of days. thank you soo much for putting such great efforts many thanks.
Great video! Thank you for sharing.
Thanks for watching!
Oh Boy...!! Excelente... Muchas Gracias!!!
Hi There, Great Video! I'm using a single-page layout and want the canvas / pop-up to close automatically when a line item is selected. Looking forward to your feedback, Thanks in advance
what a tutorial thank you so much God bless you
Glad it was helpful!
Thank you, works perfectly
this is really awesome tutorial for us...
Superb! Thank you!
ps: what's the background noise? a game?
Great as always.Thank You!
Thanks for watching!
Thank you a lot for the video!! I really appreciate it :)
Amazing work ✨💫
One issue I can foresee with this method, of creating a custom menu is that adblock extensions could block it from opening. But overall a very creative and clean solution.
That's not a Browser popup! So no need to be afraid of ad blockers...
Great video thanks! no need to install a complete element plugin to use off canvas element.
Super helpful!! Thanks so much
Great but what would be the best way to create fixed full height sidebar menu header?
I'm just trying to wrap my head around this one... if something is fixed then it can be full-height only when the viewport reaches its actual height, it's the limited size content inside the flexible context. So, the "fixed full height sidebar menu header" should be what exactly?
@@OoohBoi Thanks for your quick response and for your work! Actually I got it done using Sticky Anything plugin and Popup assigned as a sidebar section with vertical menu. So I used left column, made it sticky and in full height 100vh, and created it as single page template like in this video ruclips.net/video/1cScCjyAwJE/видео.html But I was wondering is there a way to make header template act as a sidebar across website?
@@marbak1505 Ahhh, OK, now I've got the point! Theoretically, you could turn the header into the sidebar, I don't see why not, however... there's always a catch. And the catch is the HTML structure of the WP theme itself. Think of it in terms of the Section and Columns (I'm trying to use the metaphor, it's not literal); HEADER is like the top-most section that you're trying to drive-in next to the main content (section) and above the footer (another section). Does that help?
@@OoohBoi Thanks, got it! Header will always be header literally and it should stay that way. I overlooked basics :) My need was to have vertical main menu in fixed sidebar as template across website. Only way to achieve that is to use canvas template for pages + sticky column. Thank you for making it clear to me and reverting me to right track. If you could create best solution for that kind of layout one day, it would be helpful for many I think.
your channel is the bessssst
Another great tutorial. Thanks!
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.
At 12:28 you click the edit with Elementor and select to edit your header. Mine does not have the header option. Where did that come from? Was there a step that was skipped over? Now I'm just sitting here and not able to go any further. Everything was going perfectly until then. :O
I watched another video that did this same thing. Where in the world is this header coming from?
For some strange reason you are one of many... wordpress.org/support/topic/edit-with-elementor-missing-from-top-bar/
You are TOP! Many thanks my friend!
Glad to help!
Great stuff. Im ur fan and utilising elementor with ur videos. Thank you for your works. 🙏
Awesome, thank you on the feedback!
Hi, Great video can we always open sub-pages?
The UI has changed at some point. I don't see the "popup settings" title at the top of the settings area. The Layout Settings just looks like any other template settings and there is no 'overlay' or 'close button'. To see these settings, you need to click on the settings sprocket down in the left corner, now.
OK... but wasn't it always down in the left corner? I didn't use it for a long time, maybe I'm wrong.
Excelent tutorial bro!!! Thanx!!
Glad you liked it!
Just saved my day 💜
very helpfull really looking for it and u made my thank you soo much with my heart
I'm so glad!
Great Tutorial!!! How can you open the menu on hover?
I don't think you can, there's a great chance for a popup to cover the trigger button and send the popup back to where it was initially. And thus create some crazy back-and-forth shit...
@@OoohBoi I've managed to make it work, but the only way to close the popup is by clicking the close button or on the overlay. I used a tutorial from "elementor codes"
Great Video and Loved
Glad you enjoyed it
Hi. Can a css code be added for a transition to opacity?
Using this in 2022. Thank you!
I KNEW SOMEDAY I WOULD FIND YOU.
I'm soooo glad you did 😁
Very well done 👍 Thanks so much!
Thank you so much, you are incredible!
You're very welcome!
Awesome video bro 👌 Keep up the good work going 💪👍
Do you have any information on the horizontal arrow showing different directions once clicked? Currently, the Sub menu arrow only shows itself pointing in one direction, down. I would like the arrow to point to the right when the sub-menu is closed/collapsed and the arrow points down when the sub-menu is open/expanded. How can I do that?
Great video. Elementor doesn't have a setting for pushing the canvas to side, is that possible with css, even when the pop-up is used?
No canvas push, that's what breaks everything coz there are some special CSS rules needed for BODY/HTML elements.
@@OoohBoi Ok, thanks.
Exactly what I needed x
Awesome, thanks for watching!
@Oooh Boi can you tell me how have you made sub-items in your menu in different font sizes?
what is the version of Elementor pro you are using? I do not see some of the option in the Pro 3.5.2.
Great step by step instructions!! Someone on an elementor fb page suggested I get rid of my dropdown menu and do this. I have a fair amount of drop down menus so I'll play with this and see if it looks better than what I have now...OH you were super fast with the picture below the menu. Any suggestions for what a shrink can do to perk up the menu (OH...I'm colorblind AND being creative on websites is tricky. Any advice from anyone appreciated! Xx
Karen, just do it black and white, you can't be wrong...
Thanks!
Would you describe the process to make this popup only replace the main nav for tablet/mobile?
Didn't I mention that in the tutorial?!
Are Elementor Pro popups SEO friendly? are they part of the normal DOM?
So all works perfect but then when I go to use on my actual mobile device, it’s appearing on the left hand side without any animation or even a exit button. Can you help?
Thanks very much his was very helpful👍👍
Спасибо бро! Крутые уроки у тебя! Единственный минус такого меню, на мой взгляд, на широких мониторах пользователю придется поворачивать голову вправо, а люди ленивы.
JUST AMAZING!