Create Better Mobile Menus With Elementor Popups

👉👉 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!

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

Dope video! Thanks a lot for the info.

Unfortunately it wont work on a Menu for a Single Page site with Menu Anchors, because the popup remains opened after selecting an option from the Menu, therefore having to manually click the X close button. Is there a way to programatically close the Popup upon click anywhere on the screen?

Hi, love your vids! I Have a different elementor that is showing me a different interface and I can't change the pop-up X - "close" icon size or color can you please help me?

a very wise decision, never click on menu items in the lessons on creating these same menus

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

Thank you so much for tutorial, but jeffery what about sub menus? You can't create sub menus with list icons widget.

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! 😊

How can I make the mobile menu sticky??

Decent tutorial but would have been a true 10/10 if it showed how to create a good menu itself.

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

Amazing tutorial

This is an epic tutorial 😍

What a fantastic tutorial. I really like using this menu. I am running into an issue with the menu not being clickable every once in a while after navigating through the site. It registers as a click but the menu doesn't fly out. Any suggestions?

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

Basically this is a: Let's draw Mona Lisa, grab a piece of canva, well I already I done some of the work so we get this thing flow, next step, you now have to put it in a frame. Amazing Video about how to draw

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

Thanks a lot for this video! 👍👏

manny manny thanks you bro,,,

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.

Nice video. how did you add the menu and style it up?

Thanks, I thought I was going crazy. All.i had to do is to make another menu.

When I did the column width change at the end for the header it squeezed my logo and made it pixelated

Can someone please help me out? My popup menu keeps getting pushed under footer in mobile and tablet view. It displays fine in desktop view. I would greatly appreciate your help. I have been at it all day. I’m about to give up on it.

Thanks for this great help❤️

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?

Thanks for the tip. This is very useful!

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?

Love You 😍 thanks a lot

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

YOU ARE THE MAN! Thanks a bunch!!!

Great video! How did you import the svg-file? I don't find a way to do that with Elementor pro.

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

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

My menu isn't showing in Firefox. The logo on the left is visible, but the hamburger icon isn't. Any help is much appreciated (I commented on another video accidentally). TIA!!

thank you so much! that was so helpful!

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!

Followed you step by step for an hour, and this did not work. When I click on the pop up on Mobile nothing happens. Ugh.

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

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

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

Thank you !

Hi Jeffrey!
Great solution! :-) I have, is that the menu / the popup doesn't close after clicking on the menu, as I try to use it on a One Pager.

Edit: After adding this HTML above the menu in the section template it works perfect in my case also:

<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
</script>

Thanks a lot for your video! :-)

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

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

Any tutorial you can recommend for menu template

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

Either I am too stupid or this just doesn't work... no matter what I try, the menu either doesn't show up at all or is all wonky and way too big or too small... Did Elementor change something since this video came out? It shows up correct in Elementor preview, but not on my phone in any browser.

There isn't a way to add in hover effects with this unless it's with code, huh?