Unique MOBILE MENU design with Elementor Popups

Create unique off-canvas mobile menus with Elementor Pro while using the Hello theme.
CONTENT:
00:00 - Intro
01:45 - Header setup
04:27 - Popup setup
12:07 - Conclusion and accessibility
-----------------------
→ See Elementor plugin offers and discounts
trk.elementor.com/jcwebtech
→ Get reliable Wordpress hosting with Cloudways
www.cloudways.com/en/?id=785560
→ Speed up your website with WP Rocket:
shareasale.com/r.cfm?b=107594...
My portfolio: jcweb.tech
Instagram: / jcweb.tech
Facebook: / jcwebtechcz
-----------------------
Useful links
How to clone your website to Cloudways
support.cloudways.com/en/arti...
---------------------------------
Some of the above links are affiliate links, which means that I earn a commission when you make a purchase via my link, however, you do not pay anything extra.

[@jcwebtech]

To get that page speed improvement I mention in the video you need to enable the "Inline Font Icons" in the Elementor experiments, or upload your own SVG icon.

[@gabsnands9845]

Awesome. Just subbed sir. Keep up the awesome work !

[@jcwebtech]

Thanks !

[@trrolenda]

Nice content and well explained

[@jcwebtech]

Obrigado :)

[@rahulbaghel1680]

Really helpful thanks

[@jcwebtech]

You are welcome!

[@azzaalbelushi2885]

Awesome👌

[@jcwebtech]

thank you!

[@Hugo-ob7hu]

Great work, it was top, and it was well explained, I would like to ask some questions by clicking on something in the link menu, the menu does not close, it just goes from the bottom to the desired page, but when I close it goes back to the beginning, what can solve this?

[@jamespandian3166]

why is mine show it to the center of the page not on top

[@ahmedmassalha7602]

Thannnnnnnnnnnnnnnnnnk You !!

[@jcwebtech]

Haha you are welcome!

[@md.mehedihasan524]

Thanks

[@jcwebtech]

You are welcome!

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

[@jcwebtech]

Hi, I think it is quite standard behaviour, but I see why you want to prevent it. First think I thought about is to close it before you leave the page by JS. The code should go something like this: window.onunload = function() { document.querySelector('.class of the close button').click(); } where you would substitute the class of the close button for the actual class it has. Din't test it though.

[@justinchildressofficial]

Thanks for the awesome tutorial. It was exactly what I needed. I do have one issue, however. I'm doing a one page design and I'm using anchor links for the navigation items. When I click a nav item in the popup it scrolls to that particular part of the page that I need it to but the popup doesn't close. Is there a solution for this?

[@jcwebtech]

Hi Justin, Yep, I have ran into this too. Add this code to your website and change the 251 to the id of your modal - you will see it in the shortcode of the popup. Don't forget to change it on both places in the code. document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => { if ( id === 251 ) { jQuery("#mobile_menu").click(function () { jQuery("#elementor-popup-modal-251").hide(); }); } }); }); });

[@justinchildressofficial]

@@jcwebtech Awesome, thanks so much! I'll give that a shot.

[@squarem2]

Hi I when i press inline (auto) it still under the nav menu and i cant put it next to the others can you please help me

[@jcwebtech]

Are you using the new container or not? Can you share the link?

[@yannickscheidel7028]

Hi there. Nice content. I did replicate it as well for our site. But i still have an issue that I don't get that dotted line removed in the mobile menu. It sticks always with the first element in the nav menu item. Maybe you can help :)

[@jcwebtech]

Hi, glad you found it helpful. Not sure what dotted line. Maybe if you share url... (dont share actual url, writ like domain dot com otherwise youtube will delete it)

[@jasonlitson]

Nice videos you have made. Do you plan to continue making videos?

[@jcwebtech]

I do!

[@devlife5596]

Good day bros. When using POP UP trigger like this, Does that hurt SEO?

[@jcwebtech]

As i mention in the video, you should be ok by adding links to the footer but it will certainly not help your SEO as all the popup is just not there from the point of view of google bot.

[@devlife5596]

@@jcwebtech Thanks so much bros. I do like what you done on WP Tut. Keep Going and hope all the best coming to U in 2023. Send from your big fan.

[@viktorvarbanov1079]

Hey, great video! I love the idea and the implementation! Tried replicating it, but the pop-up does not seem to show when clicking the hamburger button. I've ensured that the correct pop-up is linked. What could be probable causes for this issue?

[@jcwebtech]

Are you trying on an actual phone or in responsive mobile preview on desktop? Saw it sometimes not working in the preview.

[@viktorvarbanov1079]

@@jcwebtech Tested it both on a mobile phone and browser simulation. Doesn't work either way.

[@jcwebtech]

@@viktorvarbanov1079 Hmm it is normal elementor popup. You can try to link it via class instead of selecting as the link like I did if that makes any difference.

[@viktorvarbanov1079]

@@jcwebtech Hey, thanks for the reply! Not be honest, I am not entirely sure what approach to use in order to link this with a class. I noticed that the URL in my browser changes whenever I click the button. I am getting this: #elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjU0NyIsInRvZ2dsZSI6dHJ1ZX0%3D Does this make any sense to you?

[@jcwebtech]

@@viktorvarbanov1079 That does not sound right, seems like the elementor javascript isnt working properly. Do you have any caching, JS optimisation in place?

[@klarafall3600]

Love your videos, quality content. I have the problem that I delay my scripts, so at page load, the popup is inactive, do know which script I have to exclude?

[@jcwebtech]

Hi Klara, thank you very much! I believe it is handled by dialog.min.js but it has unfortunately a dependency on jQuery. I will think about Vanilla JS solution for some future video 🤔

[@myrainystours]

god

[@GTAITBiz-pg4on]

How about a half shape menu for mobile menu?

[@jcwebtech]

Not sure what do you mean, if you mean the menu not being full width, you can simply style the popup that way.

[@GTAITBiz-pg4on]

@@jcwebtech you have an example?

[@UnlimitedElements]

Hi are you intrested in creating tutorials for our plugin (paid job)

[@jcwebtech]

Hi UE 👋, feel free to contact me via contact form/email on my portfolio - link in the description. Happy to learn more.

[@teuccio73]

two levels menu Please !!!

[@jcwebtech]

:) already working on the tutorial

[@marioorlovac9659]

@@jcwebtech Hi JCwebTECH. I came across this tut, but I'm struggling with multiple levels menu..because the subitems display outside the viewport. Any quick fix on this? Also releasing the new video would be much of a help. Thx in advance.

[@jcwebtech]

@@marioorlovac9659 Hello Mario, could you share a link?

[@marioorlovac9659]

@@jcwebtech Hi, can I contact you via email because its in test stage and pass is required.

[@jcwebtech]

@@marioorlovac9659 you can