Create Better Mobile Menus With Elementor Popups

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementormenus #elementorpopups elementor tutorial

[@LytboxStudio]

👉👉 Important disclaimer - This method for adding menus is intended for mobile use only. Please do not use for desktop menus as it can have a negative effect on SEO as the popup is not visible in the code for Google to find until the popup is triggered. As long as you have a regular desktop menu though, no SEO harm will be done using this method for mobile menus. I have more videos focused on SEO with Elementor in the works!

[@rg-web-design]

I haven't seen the video yet (I always look at a few comments first). I thought that the latest Google algorithm focussed on mobile more so than desktop? I could be completely wrong but my belief is that by not having a burger menu and instead having a button / clickable graphic would have a very negative effect on your SEO. Please do correct me if I am wrong. Great work that you do, thank you.

[@Ititchiwhatititchi]

What about having a popup menu for mobile and tablet, would that have an effect on SEO?

[@rg-web-design]

@@Ititchiwhatititchi Yes, it does as it is triggered by a button which is not recongnised as a menu. The default menu hamburger symbol is recongnised as a menu.

[@rg-web-design]

@@Ititchiwhatititchi Yes. I would like to have a pop-up menu but, having looked into SEO impact, I am not.

[@HazStrikesU]

How do you even find out these little details?

[@cs-study-ua]

Thanks, man! ... I 've looked for this tutorial for a lot of time. While I use Elementor for almost three years. Now I know what's the popup for mobile. You've been really helpful.

[@rachelleking333]

Thank you! I've been trying to get my mobile menu to overlay without forcing me to show it full width, this is great!

[@TheWarriorSolution]

This is a much better solution to the basic mobile menu. Thanks so much for sharing!!!

[@kerimtim]

Wow. What a Great Tutorial man. Thank you so much. Never thought that one can do so much with Elementor

[@fedestock1815]

Nice tutorial. I have plenty of Elementor knowledge, yet, I learned some new things here. Thanks a lot!

[@ovoitena]

Thank you so much! I was trying to do that for a couple of days now and thanks to you now i finally got it, thank youuuu ;)

[@LytboxStudio]

Thanks! I’m so glad it helped 🙏

[@nkafridi07]

OMG this is awsome I was facing defiulties when I make mobile menu but now its so easy for me thank you for such amazing tip. :)

[@LytboxStudio]

Many Thanks 🙏💜

[@lucasborges4226]

Great tutorial! Amazing approach, thank you!

[@vincent_veenenberg]

Awesome video!!! Thanks for all of this, really helped me out. Watched it once when searching and second when editing. Thanks man!

[@LytboxStudio]

So good to hear!

[@seyedk8908]

Thank you. It was a huge help to my web designing.

[@P4TTT]

Would haven't ever thought about using popups as mobile menus, it looks great. Thanks!

[@LytboxStudio]

Glad it helped. Cheers!

[@tech-ninja8]

I'm using it but facing issues when ever any linked clicked on website the popup menu arrives and that's making it wired what should I do to make it only click with icon on header ??

[@california_ray]

Thanks, man. Nice to search and find exactly what direction I needed in the first go!

[@LytboxStudio]

So glad to hear this! I love it when that happens

[@rodrigoinsua3784]

Amazing tutorial, simple but with multiple design opportunities, thanks a lot!

[@LytboxStudio]

Thanks 🙏

[@JaveriaYousuf]

Took me some time to figure out the menu section template itself,, however putting everything in the place was very easy due to this video. Thank you again!!!

[@remixarash4288]

Any tutorial you can recommend for menu template?

[@JoshMathewsofficial]

Best tutorial on menus for elementor I've found. 👌

[@CarolynneSmith]

Thank you for this tutorial. Just was I was looking for.

[@Sobabo90]

This tutorial is exactly what i needed !!! I'm so thankfull !

[@LytboxStudio]

Awesome!

[@officialgladdalungstriedthat]

I truly enjoyed your delivery. Easy to understand content. Thanks alot

[@alfredoduran6516]

Excellent friend, you have given me a new inspiration! 💪

[@LindsayJo-Crenshaw]

This is really clean work, dude. Thank you so much for this! Helped me come up with a better solution for a client that wanted a unique navigation bar that just didn't translate well on mobile. You have a new subscriber! :D

[@LytboxStudio]

That's awesome! Thanks for the sub and welcome to the Lytbox community!

[@jcwebtech]

I have been using this for a while and I also noticed, that not using the default mobile menu widget gives you about 10% boost in performance on Google Page Speed. But there might be an issue with accessibility and crawling the site as the popup is not part of the DOM until it shows up. Not really sure how to fix the accessibility part, but for indexing it should be OK having all the links in the footer. It also often breaks with caching so always test after enabling cache.

[@LytboxStudio]

As long as there's a menu in the desktop version indexing will be fine, the nav is still in the markup to crawl. The only indexing issue would come from having both the desktop and mobile in a popup menu. I'll be looking more into the accessibility

[@teunbraber]

I used this video every single project I do, great stuff!

[@LytboxStudio]

That’s awesome! Really cool to hear 😎

[@mohammadabdi3074]

It was just soooooooo helpful! Thank you Jeffrey!

[@gugathecapoted]

VOCE É UM SALVADOR!!!!! VALEU IRMAO

[@iamofarrell]

Dope video! Thanks a lot for the info.

[@gautamneeraj]

This is the best video to understand and build a sidebar menu! Thank you. How did you make the content move when the menu pops up? 14:48

[@andro5]

Amazing video. Thanks so much mate. Would you know how if I can add buttons and social media icons to the bottom of the menu? I tried adding those but for different size displays, it appears at a different height. Is there a way to fixate it to the bottom so it appears at the same exact location for every size mobile display? It would be much appreciated.

[@jaimevtv]

Thank you brother for this content, I tried it on my work it looks fantastic and great for user experience.

[@LytboxStudio]

I’m so glad to hear! Big thanks! 🙏

[@Dhrubo_Jyoti]

Thanks for the clear and detail explanation. Solved a big issue with Elementor.

[@LytboxStudio]

Thanks! 🙏

[@arthurod44]

it helped a lot and it workes ! thanks man

[@CliffTam]

Thanks for the tip. This is very useful!

[@Claymore300]

Thank you very much I will test. But I have a small question: I have already seen this style of mobile menu which is really better than what elementor offers. I would still like to keep an animation on the burger menu icon. For example if on click on it, there is a fluid animation which transitions to the cross to close the menu.

[@yulsdiaz8521]

thank you so much! that was so helpful!

[@joorchampi3346]

Gooood thank you so much!!!!. Greetings from Barcelona!

[@David-zp8rx]

YOU ARE THE MAN! Thanks a bunch!!!

[@rohitrajani999]

Thanks a lot for this video! 👍👏

[@theleanbodyteam]

Hi, Thank you so much for this tutorial. It has given me the flexibility for the menu that I was looking for without using any extra plugins. I now encounter one problem in the accesibility in google page speed and it is showing me that the ID in aria has been duplicate so it advice me to change it but I don´t know how to fix it . Have you heard about this problem before? Thanks 😊😊

[@MikeHudsontek]

This is great, thank you! I can't seem to be able to right align the menu though. Works in the editor but not IRL

[@macropsialberto]

Hi Jeffrey, thank you very much for your tutorial, you look it very easy and functional. Greetings from Bogotá, Colombia!

[@HazStrikesU]

Hey man thank you so much for this I was wondering how I could create a better user experience. It looks a lot more smoother and better and much more professional. Thank you for this. I was stuck on creating a hamburger drop down for hours because I also had a colour changing header and so the padding got messed up because it would not show the hamburger drop down menu because the header sections would go behind the page section and wouldn't show up and after 2 hours of trying to find a fix I come across this life saver of a video! Learned a valuable lesson here as well, education is key and learning from people who have already done it instead of trying to find another way by reinventing the wheel!! MAJOR KEY! Very good video! Keep up the good content!!

[@LytboxStudio]

I'm so glad to hear you found a good solution. A mobile menu plays a big part of the UI and user experience.

[@vaireamana5331]

Thank you !

[@exegonzalez8562]

Thank you so much! really! I made a website with this nav menu, and looks awesome.

[@mhyklnieves9319]

Hey man, thanks for this! Really helpful. Quick question, what font are you using on that website? It looks really good.

[@thatslaplagne]

super helpful! THanks you. Really easy to work though alongside the video

[@user-kc9lj8to3j]

Thank you so much!

[@hidemyass809]

Amazing tutorial

[@tomekpniak6628]

Thank You for Your SUPER contents!!!

[@LytboxStudio]

Many thanks! 🙏

[@xxnetto]

thanks man, i'm brazilian and your explanation is very clear and objective.

[@LytboxStudio]

Glad to hear that! Thanks!

[@christinelopreto4865]

Nossa, eu adorei tbm!!! Amo a didática dele!

[@arturo5050]

Hello, I think we can add a trigger on only show in mobile, that way we can just only have one header. Also can we add some pictures of the product in the mobile menue like mega menu?

[@caroltafuri]

Jeffrey, you are the best. Best regards from Brazil

[@sarimryan]

Great video. Exactly what i wanted.

[@LytboxStudio]

Thanks! 🙏

[@maicocastro2244]

Thank you so much, brother. You solved a problem I was having here with your tip. Thank you very much.

[@LytboxStudio]

That's great! Thanks

[@visualbygilra]

thanks mann, so helpful tutorial

[@karldavidson27]

It would be extremely helpful to show how you created your template. For example, the horizontal lines under the nav links. They look great.

[@86Vinks]

he used the elementor "icon list" widget as far as i can tell. The lines are the dividers you find in the widget settings.

[@patricksheridan2829]

Guy literally made a video for people to learn and skipped a giant step. I’d love to say “thanks for your help,” but now onto the next video that realizes not everybody navigates elementor easily - which is why we’re watching this video.

[@carloslaboy4279]

@@patricksheridan2829 I agree that it was very necessary to show how he created the template. He did hover over the section and it did turn out to be an icon list, but I would've liked to see how he set up his own template.

[@m_acci]

Es muy sencillo de crear ese menú muchachos, cosas básicas de Elementor 😂

[@mksundstrom]

Using Iron list for the menu items has the drawback of not being linked to your WordPress menu settings. I can’t ask a client to use element or template editor every time they wanna add a menu item.

[@nidarahman2305]

thanks very useful tutorial , i wanted to knwo how i can give a different anumation and settings on mobile menu than desktop ,, from your video i get that i can make a different menu for mobile

[@jurekorosec14]

Hello! How can I add sub sub category? I have main categorie Sport, then Leggins and then Blue leggins. Thank you for your help!

[@mdrobiulislam772]

manny manny thanks you bro,,,

[@Sweet.faiza77]

Love You 😍 thanks a lot

[@ayenipeter4886]

Great video, this helped me to build a fullscreen menu. Thanks Jeff

[@LytboxStudio]

Awesome thanks!

[@ChrisOkw]

dude! thank you so much! great video keep up the good work. subbed!!

[@LytboxStudio]

Thanks for the sub! Much appreciated!

[@polyarnik]

Thank you for the tutorial! When I hit "back" on my phone, it opens a previous page WITH the popup still open. Any way to prevent it from happening? TIA

[@jennyvien8106]

Great video, great explanation, thank you!

[@LytboxStudio]

Thank you Jenny I appreciate that

[@sl8415]

Thanks for the new approach.

[@LytboxStudio]

I appreciate that thanks 🙏

[@wajid9922]

Thanks, Today i have learned something new.

[@LytboxStudio]

That’s great! Thanks!

[@deivideg13br]

great job! you now have a follower from Brazil.

[@LytboxStudio]

Alright! Much ❤️ for Brazil! 🇧🇷

[@greensky517]

This is an epic tutorial 😍

[@yannickscheidel7028]

Hi jeffrey, great video. I did it exactly as you described in the video for one of our pages. After I switched the menu to this one here, I recognized that we don't hit the Core web vitals anymore based on some layout shifts when loading the page. Not sure how to solve that issue and maybe you have an idea. I can send you he url if it is somehow possible for you to check

[@luishenao9192]

Really helpful video bro, thank u so much! I would like to ask for a little bit more of help. I did the mobile menu and it works good, I'm using it with anchors links 'cause the is an one page and when clicking on any of the anchors and later close the mobile menu it takes the user back to top of the page. Do you have any idea how to avoid this? thanks forehand!

[@VizioMakeupSchool1]

Hi ! Great video, stupid question, what font did you used and size for the menu you did?

[@havenbjj]

Thanks for the amazing video Jeffrey. I followed all the steps but when I click the hamburger menu on my phone the pop-up is not showing. When I make my desktop browser small it does show up. Any fix for this?

[@mohammaddr4652]

Thanks for this great help❤️

[@LytboxStudio]

🙏

[@Who.Said.Photography]

Supper Cool Jeffrey! 👍👍 took me a couple of tries, as sometimes I like to fiddle as I work. 😂 but I feel it's way better than the hamburger in Elementor. Keep the tut comming.

[@LytboxStudio]

I also like to fiddle, that's how we learn! Glad it helped!

[@benjaminmartin6882]

When creating the Template, in the Section you hand-coded the menu... If you were to place in the Menu widget there, is there a way to have it automatically open when the popup loads? Without doing that, currently one has to click the hamburger button to trigger the popup, and then within the menu, they have to click the new hamburger button to expand the entire menu. Can you have it expanded by default?

[@ceciliazambeaux6958]

great, that’s exactly what I wanted to do!

[@pclalramenga304]

Man this is top notch stuff

[@jhonyc1403]

Wow man you are a Elementor Rockstar its awesome thansk so much

[@motogirlthailand]

...the most surreal experience right now! I just punched into KZbin some keywords and your video popped up. You may or may not recall, but I bought your Dell XPS from you a few years back. In fact, I am typing on it right now. I am correct, right? Haha!

[@SraTrollencia]

Thank you for your video, it was soooo useful for me 😊

[@LytboxStudio]

Thanks! 🙏

[@justaguynamedleo]

Hi everyone, is there anyone who could help me out here? I'm using this in my projects and i just noticed something that i don't how to get around it. In a single page project with a navigation made with anchors, when you select one of the items in the menu, the popup doesn't close. Is there any way around this?

[@aminhn6569]

Thank you for your perfect contents! I have a question. why did you first create your menu design into a section template and not in pop up?

[@LytboxStudio]

Thanks and great question. I designed in a section template to have a better canvas with the full page view. But to be honest, in retrospect, I see it could have been productive to build the menu directly in the popup as well.

[@MikeHudsontek]

Is there anything wrong with not using the menu widget to create menus? instead just aligning text up with links?

[@user-ew6wr8my5i]

Note: For people who are experiencing problems with the close button in a pop-up menu opened on mobile not working, set the entrance animation only in the desktop version and delete all entrance animations in other platform settings to make it work. (Because the animation set in the desktop is used by default in all responsive versions, even if the animation is deleted from mobile, tablet, etc., the animation set in the desktop version is displayed.)

[@emirbasha1410]

Hey, Jeffrey! I just start designing on elementor recently but I'm kinda overwhelming I don't know when to start and what should i learn first, I find your design approach with elementor the easiest and the best out there so can you guide me a little bit on how can I structure my web design process?

[@LytboxStudio]

Thanks Emir. I think a good start is to join our Facebook community ‘Building Businesses with Elementor’. Here’s a link to join and look forward to connecting with you there - facebook.com/groups/buildwithelementor/

[@emirbasha1410]

@@LytboxStudio I request to join the groups a few weeks ago but I didn't get accepted yet?

[@LytboxStudio]

@@emirbasha1410 I’ll take a look first thing in the morning and make sure you’re in.

[@akshaykotkar6473]

very helpful

[@AJ-Pixelyze]

The Wizard is here 😉 I have been looking to for long time. I wonder if you have a tutorial on how to use Elementor fully like covering everything.

[@wordpress9]

Great video thanks. Is there a solution to make the menu pop back in after the menu item is clicked?

[@m_acci]

Hace tiempo que quiero saber como hacer para esconder la url que aparece al hacer mouse over en el icono que abre el popup.. sabes como se puede lograr? Es que es muy molesto para mi ver una url larguisima al poner el mouse sobre el icono. Excelente video por cierto. Muchas gracias! 😊

[@tutibit]

Thank you.

[@elvandalo_]

Great video! It worked, but it seems on my side the close button isnt working, do you know about this error? I'm using the latest version of Elementor

[@yassine4523]

Thank you :)

[@LytboxStudio]

Much appreciated 🙏

[@smeagoltheunrealdeviant9357]

Thank you so much! This used to bother me so much lol

[@user-pv9ij1vr3c]

Thank you

[@LytboxStudio]

Much appreciated 🙏

[@westsidevirtual7920]

Hi Jeffrey, new subscriber here. I like the fonts you use in your menu. What fonts did you use? Thanks in advance!

[@rheamozo489]

Love this design! Thank you so much for this helpful tip - have implemented into our design. I do unfortunately have a problem it's strangely only showing up on my home page but not on the rest of my pages! Any tips on how to troubleshoot this? Thank you

[@LytboxStudio]

Aw thanks! And yes, sounds like an issue with Display Conditions. Check to make sure no other headers templates have conditions and that your header with this pop up has the condition for ‘Entire Site’

[@AlexBartokMusic]

Hello and thanks for this tutorial! I saw that the menu can be dragged left-right, how can I make the menu non-draggable? And, with this, can I make everything under the opened popup non-draggable as well?

[@spaklhd603]

Try to add max-width: 100% to the entire page css

[@rubendragan6514]

thanks 😀

[@LytboxStudio]

🙏

[@KekeliBuckner]

This video really helped, thanks. Was wondering if you could help with a many that has sub menus. How would you add that to the menu you created?

[@LytboxStudio]

It depends how many items are in the menu. The main thing is making it easy for the end user. Usually the menu widget with the dropdown is good enough but if there are lots of submenu items I would rethink how to structure them. Here's a tip, I would build the mobile menu and test every step on my phone and adjust layouts and spacing based how it comes out on my phone. This will improve usability.

[@KekeliBuckner]

@@LytboxStudio thanks man. I found a way to add drop-down using tabs. Works great

[@vhenning82]

thank you Jeffrey for the mega post. i have implemented it into a new productive site. This is a one page site with anchor links. It took a while until I found a solution that when you click on the links the popup closes again. maybe you can expand your content in this regard, for your fans ;-)

[@LytboxStudio]

Good idea! Thanks! 🙏

[@eacc95]

I just encountered that... It doesn't close; I even try placing the "nav menu" option, and neither does it.

[@eszter1508]

Hello, could you please share with me/us the solution, I am struggling with this problem. I would really appreciate it. Thanks

[@LytboxStudio]

@@eszter1508 do you mean you are using anchor links in your nav menu and it closes when clicking on it?If you can give me more details and possibly a link to your site I can check it out real quick.

[@eszter1508]

@@LytboxStudio Hey Jeffrey, I have a one-page site with anchor links in the nav menu, and I had the same problem with the mobile menu (by clicking the links in the pop up menu, the pop-up stayed there and didn't close at all) but recently I have found the solution (by putting a script into the pop-up itself with an HTML widget) Thx for the awesome content!

[@17Kalash]

it is possible to create another popup triggered by an element (like an elemento of the menu) of the first one?