virusword.com

Learn Wordpress

Home/Videos/Create an Off-Canvas Pop-Up Menu – Template – Elementor Wordpress Tutorial

Create an Off-Canvas Pop-Up Menu – Template – Elementor WordPress Tutorial



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

Reader Interactions

Comments

  1. 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?

  2. 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.

  6. 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.

  14. 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 😅

  15. 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?

  16. 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.

  17. 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 👍

Explore more

Get our Wordpress Guide Get Plugins Get Connected