Slide Out Mobile Menus for Elementor With No Plugin or Pop Ups

✨ Join us in the Lytbox Academy Community:

Link to the code snippets for Elementor Slide Out Menu 👇

/////

✨ Learn High-Level Web Design Skills With Me:

🟢 Master Elementor while learning web design skills:

🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:

🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:

🟢 Become a Lytbox Academy Pro Member:

/////

✨ My Recommended WordPress & Web Design Tools:

👉 The hosting I use:

Cloudways (use promo code LYTBOX for 30% off 3/months)
xCloud:

/////

👉 My WordPress Tools:

Elementor Pro:
Breakdance Builder:
Bricks Builder:
Crocoblock:
SEOPress (the best SEO tool for WordPress!):
Perfmatters:
InstaWP:
WP Umbrella:

/////

⏰ Stamps
1:37 - Designing and Building Mobile Menus
13:21 - How to build a slide out menu without a plugin
19:32 - Adding a slide out menu with a plugin

Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementortutorial #elementorcontainers

[webprimedesign]

Great tutorial - I had a few issues when using option 1 within a website already created using sections rather than containers. My solution was to create the template as 'page' instead of a 'section' and within the template, I changed the page layout to Elementor Canvas in the page settings. This gave the desired effect of a full-screen menu on mobile without the header and footer.

[bySterling]

Unique modern mobile menus have been a top design priority for years! Great tutorial as always Jeffrey and thank for reminder about Crocoblock, I’ve been a Pro member for years but haven’t used their plug-ins on sites lately so will bring aboard more in 2023 client sites

[SamWereb]

Well done. Never mind the SEO aspect, the nav tag @14:45 is crucial for accessibility compliance if you're using that widget for a navigation menu.

[macropsialberto]

Thanks a lot Jeffrey, really, besides to enjoy your way to teach with elementor and programming, this is very useful and didactic. Greetings from Bogotá, Colombia!

[pearloftheocean]

Hello sir,

I am a student from Sri Lanka,
and your video very very helpful to me,
Thank you very much sir,
Wishing you long, hapy and healthy life.

[GL-igch]

Love this! Great video, it works perfect. How can I have it slide in from the opposite side?

[DEBUGENTITY]

U can set the icons in nav menu itself.. By using the font-awesome.. Just add there CDN in header.php and then in appearance -> Menus option add the code in menus specific and it will show the icon.

[andre_di]

He tenido que hacer unos cambios en el css para que funcione al 100% y depende del dispositivo (sobretodo en tablet-ipad) todavía se observa un poco la página de abajo del menú, como si la opacidad no fuese del 100% ni estando el z-index a 101... pero por el momento cumple. Es genial que hagas videos así para practicar y tener nuevas ideas. ¡Gracias!

[JosephCooper-fi]

Great tutorial...your videos are always very informational and useful. I implemented this on my website and it works great. However, several weeks ago I implemented your example of a sticky header where the logo scales on scroll and background color changes on scroll. When I implement the html and css for this example it breaks the sticky header. Any ideas?

[Adam-yqug]

I have question.
When I include an anchor link in the menu and click on it while remaining on the same page, the menu slider fails to close automatically. Do you have any suggestions or solutions for this issue?

Thanks for amazing tutorial!

[khondang]

Thanks, This is great tutorial. I got it work. I have an issued setting top lytho-navigation between on Mobile and Tablet view. How do I add the code for mobile and tablet on Top with a difference value #?

[andrunistor]

Excellent tutorial! Thank you! I went ahead and modified just two parameters of the css code to have the menu display only on 65% of the screen width to the right. Wondering what would I have to add/change to the code to have the menu hide, if the users click outside of the menu, not only when it hits the X.

[szaszcsaba]

Jeff, please help. I tried to use the menu with an anchor on my own page, but unfortunately it doesn't disappear, it stays open. Also, when the menu bar is too long, the bottom is cut off, the bottom items from the submenu are not displayed, maybe it can be solved so that the menu bar can be moved up and down? But the anchor is most important, why doesn't it close when I click? Thank you very much for the tutorial, it's a big help.

[pedromiguelpagan-rivera]

Thank you again. Yor style is really good and keep my attention and my retention really high.

[Bnathalie]

I don't have Elementor Pro, can I use this tutorial with Elementor Header & Footer Builder ?

[srhadden]

Thanks a lot for making our lives easier. Very cool solution!

[benkilowhiskey]

Best video on this subject, by far. Thank you!

[fivedays]

Thx for a great tutorial, but i have trubels with the menu not closing on cklick, any thoughts?

[hanspaulpons]

WOW!!! I thought that´s not possible to make, once again, you solved, more important, not plug-in added, or popup !!!😃

[clementborisov]

I feel like it's just better to straight up modify everything you have by your default settings with css. I can set up every font type and color from the theme customizer and simply reuse it with css by using the var() function. I can add awesome hover effects, or add effects to my hamburger menu just by using css.