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: https://r.freemius.com/10565/3304295/
– Get Elementor Pro: https://be.elementor.com/visit/?bta=25741&nci=5383
– Get Elementor Cloud Hosting: https://trk.elementor.com/bapnesbbfa9i-cloudwebsitenew
– Support us: https://paypal.me/Websquadron
– Mastery Membership: https://websquadron.co.uk/web-design-mastery/
Hire us to work on your Website!
Contct us at info@websquadron.co.uk or visit https://websquadron.co.uk
– Facebook: https://www.facebook.com/websquadrontraining/
– LinkedIn: https://www.linkedin.com/in/imran-siddiq-7320a74a/
– Instagram: https://www.instagram.com/batswebsitedesign/
– Twitter: https://twitter.com/imranwebsites
—————————————————–
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): https://amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): https://amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): https://amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): https://amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): https://amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): https://amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): https://amzn.to/33mRqWD
LED Light stands (either side of me): https://amzn.to/3Iaerez
Fifine Dynamic Microphone: https://amzn.to/3osbxu2
Floating Shelves: https://amzn.to/3Fhxyl1
Hanging Pendant Light Holders: https://amzn.to/3qgwnhg
Vintage Light Bulbs: https://amzn.to/3K0bQ8B
source
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?
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.
The close button isn't working on tablet and phone devices! How to fix that?
السلام عليكم
Can ask you a question
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?
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.
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?
is thereany possibiltyi can do this without elementor pro
There is only one problem: When there is a submenu, it gives an error.
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?
Does having the menu like this (hidden) have an effect on SEO esp if used on desktop?
You must mention in your thumbnail and title that it needs elementor pro😠
My websites keep improving because of you. Most underrated channel on youtube! Thanks man!
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 😅
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?
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.
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 👍
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.
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.
Your tutorials are perfect, quick and relevant. Thanks mate!