Create an Off-Canvas Pop-Up Menu - Template - Elementor Wordpress Tutorial
Vložit
- čas přidán 20. 07. 2022
- Ever wanted to have a menu and other options slide in when you click the Navigation/Toggle Icon?
Here's how you do it.
Create an Off-Canvas Pop-Up Menu - Template - Elementor Wordpress Tutorial
-----------------------------------------------------
- Get Code Snippets: r.freemius.com/10565/3304295/
- Get Elementor Pro: be.elementor.com/visit/?bta=2...
- Get Elementor Cloud Hosting: trk.elementor.com/bapnesbbfa9...
- Support us: paypal.me/Websquadron
- Mastery Membership: websquadron.co.uk/web-design-...
Hire us to work on your Website!
Contct us at info@websquadron.co.uk or visit websquadron.co.uk
- Facebook: / websquadrontraining
- LinkedIn: / imran-siddiq-7320a74a
- Instagram: / batswebsitedesign
- Twitter: / imranwebsites
-----------------------------------------------------
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B - Jak na to + styl
Thank you so much Sir, I have added it in my project, take respect from Bangladesh.
Your tutorials are perfect, quick and relevant. Thanks mate!
My websites keep improving because of you. Most underrated channel on youtube! Thanks man!
hey websquatron, I am watching your video from Bangladesh.
Another fab tutorial, but having issues with submenu being wonky. Just seeing a tad bit of it off to the left of the nav menu.
Wonky? Maybe add some padding?
I am assuming here and could be wrong
I'm working on a website which has tabs, sub tabs and sub sub tabs. One main tab of mine has 5 sub tabs, out of which each sub tab has an additional 5/8 sub sub tabs. Is a full width off canvas menu advisable in this case, or a mega menu? Sorry if it's a noob question. Just trying to learn.
Mega Menu would work well for desktop. But an off canvas on mobile would be better and you could use accordions so that it shows the other sub items in a more concise way
Love your tutorials! Saved me from going mad several times. I have a question - can you create a flyout sidebar with a vertical tab that follows you down the page?
Yes, if you then make it be a sticky top.
How could I have the icon/button that toggles the Popup menu on/off screen be attached to the side of the menu? So it looks like it’s part of the menu. Hope that makes sense 😅
That would need further work, and I would need to think about that.
Thanks for the tutorial. Very helpful! One question. Is it possible when the pop-up slides in to push the content of the page to the right and not overlay it? Thanks again and keep up the good work!!!
I need to check but there was a way to do that.
Great 👍 but dud I need a help I have an video on my site and i m using ultimate memeber plugin.Now once I click on that video I want to play that but if user is login in else not.
Best to check with the plug-in developers as I don’t use that.
Thank you for the tutorial. Maybe you can advice .. I have a one pager site so in my case I want to close the menu when clicking on a menu item - is that possible.. how ?
czcams.com/video/h6oI1rg1PA8/video.htmlfeature=shared
@@websquadron wow!!! perfect :) Thank you so much, you are really the best!!!
@@websquadron Thank you so much!!! you are the best
Hello I would love to know how to make the popup menu transparent so one can see the hero image when it slides in. Love your videos but I am not getting a response to this question from elementor
You could change the overlay or the container BG transparency.
Hey great tutorial! I followed all the steps, but I encounter an error when on mobile and I scroll down, the pop up moves off the top of the screen. Seems like i cannot make it fixed. Any reccomendations?
Have you made it VH 100?
@@websquadron Yes I did. You know when you have a fixed header, no matter wheather you scroll harshly it stays on top. With the popup the content moves up and down. Please don't get me wrong, the actual pop up is not scrollable, it happens when I scroll through the website.
Thanks for this very very useful tutorial 🙏🙏
I have a menu which includes sub-menu, but nothing happens when I click on iteme, it doesn't show sow sub-menu, is there any solution for that?
It should show it unless you’ve got some major optimisation happening that affects the submenu drop down.
@@websquadron I have the same problem with the sub-menu's, can you explain what you mean by major optimisation please.
Hey man! I've been looking for a solution to have off canvas content with extended information of products, however...these are still popups, So when most people with adblockers get in and try to open that - it won't show, right? How would you get around that?
You can’t when they have adblockers
@@websquadron I thought as much...have to find another route. Thanks!
Does having the menu like this (hidden) have an effect on SEO esp if used on desktop?
It will so the best solution is to add a proper nav menu and make it be hidden responsively
Interesting thank you. I just had a elementor designer on CZcams say it’s fine as it’s in elementor’s DOM and not a browser pop up…
How to make the popup "push" the whole page over. Use case is a chat window. User can do whatever on popup and still see and do whatever on main site. Cheers.
Would need some hefty JS
The button is not working for me, any reason why? I have another website that I did this for and there were no issues, but for some reason I have all kinds of console errors with this site.
That may depends on your site, plugins, code snippets, or anything else.
@@websquadron Yeah I disabled the elementor plugin and there were no console errors. Not sure how to fix that at this point.
If there are sub menus under each menu header on mobile, and the title wraps, they will NOT display centered.
Have you tried adding css?
Scrolling your video tutorials when stuck, it is always high level to solve my problems . Love and respect 💓 brother.
But according to one page layout when I use offcanvas popup menu, when click on link item , the pop don't go off untill I click outside or close button.
Any solution for that , once I click anywhere in popup link it take to the navigated section n popop close 👍
That will need some additional JS that I’ll need to check
hey man how can i add off-canvas to main menu one one menu menu item must off-canvas how can i add it
Hmmmmmmm not sure
is thereany possibiltyi can do this without elementor pro
Best to use the templates
i have created popup following your steps as you guided but my popup is not showing when i click on icon what is the reason?
Have you got any JS optimisation applied?
I also facing the same problem. my menu popup opens after 4 to 5 continue clicking. I install a wp rocket. How can I fix this issue
The close button isn't working on tablet and phone devices! How to fix that?
Is there a Z Index issue with it not being on the front?
@@websquadron No but i set the pop-up animation for the desktop version to default and after that i tried the animation on both tablet and phone devices and it worked just fine, It's weird but if it works it works
@@websquadron However i tried to set an entrance animation for an icon that open a menu for the phone but the problem is that the animation triggers not only the icon but even the drop-down menu! Is there a way to prevent that from happening and is there a way to set the duration for the animation to let's say 10sec?
السلام عليكم
Can ask you a question
Ok
There is only one problem: When there is a submenu, it gives an error.
I don’t get that issue
You must mention in your thumbnail and title that it needs elementor pro😠
It should be obvious that I am as why would I not use EL Pro?