Build Any Mobile Menu With Elementor Off Canvas Menus (No Pop Ups, No Code, & Great SEO!)

[@LytboxStudio]

📌Dropdown WordPress Menu Correction 📌 The WordPress Menu can work as a dropdown for nested menus. Set the breakpoint to none, then change the layout from verticle to dropdown. If a toggle is showing it's because there still is a breakpoint. Go back to verticle and make sure breakpoint is on none.

[@kusalghosh7848]

It's Working

[@HossamKhalaf-sr1oo]

oh man, i wish we have coffee or tea together!! thank you for easy and calm explanation, I can feel that you want to provide benefit for others love from Egyptian living in Indonesia🧡

[@BilalShirzadDev]

Jeffery is also there with Rino I think you can see both Legends, Jeffery and Rino do not upload alot these times, I don't know way🥺

[@jnayeem08]

I just created a sliding mobile menu using popups 1 week ago. After watching this video, I'm sure creating a decent sliding mobile menu using Off Canvas is easier. Thank you Jeffrey for the video.🤗🤗

[@LytboxStudio]

Awesome! Easier and better for SEO😉

[@jnayeem08]

@LytboxStudio Yeap, It's really great. As your audience I have a request for you to make more videos about Woocommerce + Elementor. Thanks again Jeffery.🤗

[@DavidPerel]

Much needed update, thanks for the tutorial

[@LytboxStudio]

🙏Thanks!

[@FullyMichellethecreative]

Your videos are always the best Jeffery! Thanks for sharing. 🥳

[@LytboxStudio]

Thanks! 🙏💖

[@NewcityComposites]

Man!!!..I appreciate your honesty in pointing out. You spent an hour before making this video scratching your head, trying to figure out or how to find a work around the drop down menu using the offcanvas widget... i wish most instructors would highlight some of the challenges that come as a default problem with Elementor, as Elementor themselves develops these features. If its one person without any coding skills is grateful to Elementor is me... i also think Elementor should provide a work around those challenges until they themselves have it 100%... this just goes to show from the scientists to the top medical, no body, i say again no body has it 100%... everyone if actually figuring it out as the go.......Man!!! I wish i had watch this video, i spent 2 days wasting my time. Trying to man handle this dropdown menu in offcanvas, with a belt in my hand saying, Behave yah self and stay here... but the drop down menu in offcanvas is like a wild bull in a china shop...

[@corxosz]

Nice tutorial, this is great. Thanks!

[@LytboxStudio]

Thanks! 🙏

[@bobruis4073]

Amazing! Gonna watch it from start to finish

[@LytboxStudio]

That’s awesome!

[@bouroudji]

Great Tutorial !

[@rajeshkurup-u8b]

Love you young man.......Your fan from INDIA.🙏🙏🙏

[@LytboxStudio]

🙏

[@dhafinazka9090]

thank you @Jeffrey... you are really amazing. The tutorial is very useful stayhome

[@LytboxStudio]

Hey thanks! I really appreciate that 🙏

[@robguiver936]

Excellent tutorial. Thank you

[@LytboxStudio]

🙏

[@zafit02]

Every day I love Elementor more; I hope they finally give us the CSS Manager soon.

[@LytboxStudio]

If you mean classes like Bricks then I’m with you!

[@FullyMichellethecreative]

You can say that again 😅🙌🏾

[@BilalShirzadDev]

@@LytboxStudio yes

[@IndiaYaarResearch]

"Wow! This Is Such An Amazing Video. It’s Incredibly Informative And Perfectly Explains Elementor. Thank You For Sharing Such Valuable Content. Keep Up The Great Work!"

[@thewebstylist]

Finally! 🎉 Not good to hear about one page anchor menus not closing on scroll though, hope they fix asap as I use those often

[@LytboxStudio]

Finaly is right (only took 5 years 🤣) It would be nice to have the close with anchor link option. It's only a js snippet that's needed. I got another video on that kzbin.info/www/bejne/gJiqf3yPiLeSoNU

[@ratty112]

Bravo another great tutorial 👏

[@LytboxStudio]

Thanks!🙏

[@photosmee]

Thank you so much for this much detailed tutorial. ♥♥♥♥

[@LytboxStudio]

🙏

[@andonisr]

Thanks Jeffrey, that was a great tut!!!

[@CR7-r2f2e]

Hi jeffery lytbox and amzing content I learned from you everything about elementor your elementor course is amazing it is not just a course it is a big source for me and everytime I learned from it and apply my question is is it elementor gonna to be like bricks or even more better I love elementor and I don't want to exchange it even I listen to many gurus they went to bricks ):

[@LytboxStudio]

Thanks! And no need to switch, do what works best for you!

[@unityvisionro]

Thanks for the tutorial 🎉🙏🏻

[@LytboxStudio]

🙏

[@petero4102]

Great update thank you.

[@sergio_grez]

Hi! Amazing video! thank you! can i ask what hosting do you usually use for your client's work?? Thank you!!!

[@LytboxStudio]

Thanks! I’m currently using xCloud with Hetzner servers and I still recommend Cloudways to start with cloud hosting.

[@mdqmatias]

If you have a menu with dropdown, in the WordPress menu widget options you have "layout", you need to change that from vertical to dropdown and thats it, you can style it.

[@LytboxStudio]

Good catch and you're right! I tested again, when there is a breakpoint, the dropdown options turns into a toggle. When breakpoint is set to none, the dropdown turns into a dropdown. I'll need to make a revised video 😅

[@mdqmatias]

@LytboxStudio haha yeah, it works like that. Also liked your accordion option. Thanks for your content!

[@StreamlineRoofingTx]

@@LytboxStudioguess my comment I just made out the mega menu is irrelevant now 😂

[@LytboxStudio]

@ 🤣🤣🤣 it’s all good, we’re all learning

[@DEBUGENTITY]

​@@LytboxStudioyes make a revised video. Iam waiting 😌

[@Ali.Barakat]

Great video thanks! Is there a way to use off canvas with submenus sliding in?

[@LytboxStudio]

Thanks! The sliding in submenus are multi level menus. They either need custom coding (html/css) or an add on. They are on my video todo list though 😉

[@RichardMoret]

Merci Jeff !!!!

[@LytboxStudio]

🙏

[@plastic_hand]

thank you for this video thumbs up

[@manojprajapati7640]

Thank you Sir few days I thinked, how to make slide header include CTA button

[@LytboxStudio]

Great timing!

[@webtappers7863]

Thank you!

[@LytboxStudio]

🙏

[@DEBUGENTITY]

Great video. Elementor should fix this dropdown issue. So we dont have to use accordian for that.

[@LytboxStudio]

Thanks and I made a mistake…we can use the drop down by changing the layout from verticals to dropdown and turning the breakpoints to none. I have an updated video coming up next week to correct this

[@KillahManjaro]

Thank you Sir.

[@LytboxStudio]

🙏

[@justaguynamedleo]

I am, and will continue being, a fan of your popup menu, been using it for everything. Now i have to try this, it looks a lot cleaner to work with. With the popup menu, the first one, there was an issue with navigation using anchors, for example, that was solved in your second popup video. Does this off-canvas work well in that scenario, or do you need to add in some code?

[@LytboxStudio]

I still need to test the closing anchor code and update the CSS. It's on my to-do list

[@justaguynamedleo]

@@LytboxStudio cool, i knew you wouldn't disappoint 😃

[@pleuratpllana]

Great job! By the way, have you tried changing the Menu widget to a vertical layout using custom code, since they don't provide that option? That would probably work, although I haven't tried it.

[@LytboxStudio]

I haven’t tried yet, I think there’s a good chance they’ll add it…but now that you mentioned it I may tinker around with it 😅

[@pleuratpllana]

@LytboxStudio, good point. Hopefully, they get it done soon. I thought about this while watching the video and decided to do a quick test. I daresay it works.

[@AshleyChan-x1r]

Hi Jeffrey, thanks so much for this. I followed all the steps, but the dynamic tag to open the off canvas doesn't seem to work live on mobile. I've flushed the cache as well but seems like it only works in edit mode for me. Any advice?

[@JakariaAhmed-c8k]

very helpfull vidio

[@martingraw1]

thank you for the video!! Love all the content. My slide in and out animation isn't working when i check on the iPhone and the 100% VH height isn't working either. Everything works great and looks fine when previewing on the computer. anyone else having this issue or know what the problem could be?

[@LytboxStudio]

This could be a cache issue. If it’s working on your desktop then the phone can be viewing a cached version. Also double check the styling on mobile in Elementor. Sometimes I miss that

Thanks👋

[@LytboxStudio]

🙏

[@strepkoustly252]

if i use wp meteor to delay js until first user interaction, if i use off canvas menu, will crawlers be able to read it?

[@raulnava5398]

Excellent video bro, but how do I get the off canva to auto close when I click on a section of the menu?

[@LytboxStudio]

Do you mean anchor links? What section are you trying to click on?

[@wu2on]

good job

[@LytboxStudio]

Thanks! 😎

[@Aryaneftyyyy]

my elementor is up to date but why dont have animation duration option in content tab??

[@MirazKhan.WebDesign]

There is no vertical option for elementor Mega menu widget. But i can do it vertical without coding 13:40

[@middleofdecember9862]

amazing

[@StreamlineRoofingTx]

Couldn’t you put the mega menu into a flex box and make it vertical? Or maybe a little css? I’m kinda liking the idea of a slide out menu on my core pages to keep people focused on the content and not distracted by the menu.

[@LytboxStudio]

I’m sure I could have solved with some CSS but wanted to keep it simple for everyone. Pluerat provided a CSS snippet - .e-n-menu-heading { display: flex !important; flex-direction: column !important; }

[@StreamlineRoofingTx]

@@LytboxStudio Do you think a floating button titled "menu" that opens the slide-out with the standard Wordpress menu so you have nav tags in place, is just fine for SEO? I know off screen and SEO impact is a big topic. tnx

[@LytboxStudio]

@@StreamlineRoofingTx​​⁠good question. The off canvas is fine for SEO. The problem with the pop ups is the source code doesn’t show until activated so Google can’t crawl it. But the off canvas widget solves this, I confirmed the source code is visible for crawling and ok for SEO. No need for the floating button. I’d stick with the Off Canvas

[@StreamlineRoofingTx]

@@LytboxStudio awesome, thank you. gotcha on the floating button, I think ill stay with the sticky header, but am thinking of having a single "Menu" button for the slide out vs the entire menu across the header :)

[@campusconnecttv170]

Thank you

[@LytboxStudio]

🙏

[@karinaornelas4734]

I’ve been looking to build a mobile menu like this but when you click on resources for example it opens up all the tabs and has a button that says go back to go back. Something like petco or most e-commerce websites. Have any tips on how to make that happen?

[@chamathsriwijethunga]

Thank you...

[@Andy-Sage]

The only other thing needed here is a script to close the off canvas when a menu anchor is used, otherwise the page will scroll but the off canvas would stay open. love your vids though.

[@LytboxStudio]

I was going to add it but the video got longer than expected. I have a dedicated video with the closing anchors script

[@vladnoskov]

A big problem is if there is an anchor link in the menu, the off-canvas does not close or then the menu does not work. But guide very cool.

[@LytboxStudio]

I have a video on this (takes a bit of custom code) kzbin.info/www/bejne/gJiqf3yPiLeSoNUsi=CLzRaPRO6tbOVCbU

[@vladnoskov]

@@LytboxStudio Oh, thanks, i try it!

[@robertbamm7226]

@@LytboxStudio Hi Jeffrey! Great video! The custom code you are referring to here, does it work on the off canvas panel as well? I've used it myself with popups but I assumed it would need to be tweaked in order to work with the off canvas?

[@LytboxStudio]

@@robertbamm7226 I'll be adjusting the CSS to fit on off canvas. It's on my to-do list

[@NewcityComposites]

Man!!! I wish i had watched your video first before i started using the offcanvas widget. I spent 2 days wasting my time. Trying to man handle this dropdown menu in offcanvas, with a belt in my hand saying, Behave yah self and stay here... but the drop down menu in offcanvas is like a wild bull in a china shop.

[@LytboxStudio]

Haha man I feel your pain 😅 Just remember when you feel like you’re wasting days to figure something out, that’s where the experience is gained. I’m sure in those 2 days you learned a lot

[@jamiuaderinkola5963]

Maybe this will help someone but changing the "WordPress Menu" Layout to "Dropdown" fix the weird menu layout for me. WordPress Menu => Content (Tab) => Layout => {{Set to Dropdown}} You're welcome.

[@LytboxStudio]

I caught that one after. It’s a weird layout and has to be done in the right order to make work.

[@jamiuaderinkola5963]

@LytboxStudio Oh yeah, I see you pin the comment here, I already posted mine before I discovered that you've figured it out Thanks man!

[@LytboxStudio]

@ thank you! It’s awesome seeing contributions like this here

[@kenlyons3894]

I can not figure out why you're showing this in the desktop view, when the entire reason for having it is mobile? I followed each step and the trigger will not reveal the off-canvas on mobile. Shows up great on desktop. I need it on mobile, since that is the reason for having it in the first place.

[@LytboxStudio]

I find it easier to design and build in the desktop view. But like in the video, change to tablet and mobile to complete it. If it’s not triggering check your icon links (triggers) in mobile views and make sure they are the same as it was set up on desktop.

[@boriskaracic9856]

This is good solution, but it is shame that elementor does not have modern mobile menu widget,with slide and pushdown options, list item styling without custom css, animated hamburger icons etc. it is the most popular builder and still it misses this, unbelievable.

[@tapelongwenya]

For drop down links, I am currently using an accordion. 🎉 but there are limitations

[@LytboxStudio]

It’s the best work around but limited without a good amount of css

[@igotslickshoes]

What about for accessibility? Is off canvas WCAG friendly?