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

[@FullyMichellethecreative]

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

[@LytboxStudio]

Thanks! 🙏💖

[@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!"

[@DavidPerel]

Much needed update, thanks for the tutorial

[@LytboxStudio]

🙏Thanks!

[@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

[@bobruis4073]

Amazing! Gonna watch it from start to finish

[@LytboxStudio]

That’s awesome!

[@rajeshkurup-u8b]

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

[@LytboxStudio]

🙏

[@robguiver936]

Excellent tutorial. Thank you

[@LytboxStudio]

🙏

[@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

[@photosme9370]

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

[@LytboxStudio]

🙏

[@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!

[@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.

[@ratty112]

Bravo another great tutorial 👏

[@LytboxStudio]

Thanks!🙏

[@andonisr]

Thanks Jeffrey, that was a great tut!!!

[@unityvisionro]

Thanks for the tutorial 🎉🙏🏻

[@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 😃

[@manojprajapati7640]

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

[@LytboxStudio]

Great timing!

[@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?

[@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 😌

[@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

[@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.

[@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?

[@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

[@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 :)

[@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?

[@petero4102]

Great update thank you.

[@RichardMoret]

Merci Jeff !!!!

[@LytboxStudio]

🙏

[@plastic_hand]

thank you for this video thumbs up

[@webtappers7863]

Thank you!

[@LytboxStudio]

🙏

[@KillahManjaro]

Thank you Sir.

[@LytboxStudio]

🙏

Thanks👋

[@LytboxStudio]

🙏

[@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

[@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

[@campusconnecttv170]

Thank you

[@LytboxStudio]

🙏

[@JakariaAhmed-c8k]

very helpfull vidio

[@chamathsriwijethunga]

Thank you...

[@wu2on]

good job

[@LytboxStudio]

Thanks! 😎

[@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.

[@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

[@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.

[@igotslickshoes]

What about for accessibility? Is off canvas WCAG friendly?