hi guys Hamza here and welcome to this tutorial yesterday one of my subscribers asked a question in the comment box if I could make a nice mobile pop-up menu so in this video that's what exactly I'm going to do for you I'm going to show you step by step how to create a mobile popup menu using Elementor pro so the first thing that you should have is by having Elementor pro lameta helps you to create both page headers and page footers and also pop-ups using this tool to go to elemental you'll use my affiliate link which is got a huge e-comm for slash elementa then once you are there you'll install the plugin into your wordpress website and you come straight right here to the theme builder once you come to theme builder go straight to the headers and the header section will bring you right straight down here and you'll be in position to create new headers once you create a new header will be having the possibility to have a header just like this you can import from a cup of tablets that have been made already by Elementor which actually header templates just like this or you can simply create use from scratch I already created my header right here I had to use the menu navigation element which comes with Elementor Pro and then I could style up whatever I want I have this version of the header however part of the elements are not going to appear on the desktop version but also part of the elements are going to appear on a desktop version and not on the mobile version so this is what I'm trying to mean here for example now I'm previewing the header here on a desktop version and that means we are seeing all these elements the logo the navigation element and the contact button however something is missing you see this this is missing on the desktop version you simply hide that element on the desktop and the tablet version and to do that you basically have to go to advanced once you click on that section and then you hide both on desktop and tablet that means I want that element to appear on mobile devices and this is how it looks like just like this so in this case we have hidden both the middle section which has the navigation menu and also the contact button so we are only remaining with two elements that are appearing on the disk on the mobile version and let me show you exactly how I did that when you come to the column which is holding the navigation element and go to advanced come right here to responsive you see that I have hidden this column on the tablet and the mobile devices so it is only showing up on the desktop and then this other column that I added at the very last I had to hide it on the desktop and on the tablet version and it's only showing on the mobile device so now let's head straight into how we are going now to use this section on the mobile device we had now to create our pop-up and our pop-up is going to look just like this and to do that because now we want to create our pop-up to be a mobile menu we basically have to come under the theme builder and then we create a pop-up and pop-ups are basically here once we come to templates pop-ups then you can create pop-ups you just have to say add new pop-up name that pop-up then you create a pop-up you will come right straight here to the pop-up editor and you'll have this kind of setup so with the Elementor you can still add as many elements as possible to your pop-up widget so let me say if I want to add like a video I can simply drag the video element place it here and then add in whatever content I want to link up there if I ruin the video element to appear I simply can't just delete it here I can add another element I can add slide once I add slides into my section then that means that I can display slides in my pop-up however that's not what I want I simply just have to delete the element so you can add as many elements as possible or elements that you want to appear in your pop-up element once you finish setting up your pop-up that is actually going to have your logo in this case we want our pop-up to appear with a logo see it's going to be a menu and menu and then also adding elements like the navigation element just like this and I set it to be a menu and then the layout is vertical and then right down here at the breakpoint I selected nine so it won't break and then I also added another element which is a button it can take you anywhere you can give it another link that takes your visitor somewhere on your website specifically but here the main focus is on the navigation element so once you finish creating your pop-up with the navigation menu and the links that you want to appear on your mobile pop-up you simply update and once you update or publish that means that you'll have the possibility to add display conditions to your pop-up and you basically decide to display your pop-up to a specific section of your website and here I have selected a condition that say its entire entire site means that it's going to show all over the whole site whenever someone clicks or attempts to access the pop-up and here on the triggers you have to set it to be on click because we want that when someone clicks on our menu our child a pop-up shows up and then on the advanced rules you are going to specify that you want that pop-up only to show up on the devices elected below so in this case I selected the tablet and a mobile device I had to exclude that desktop device because still on the desktop version I'm going to be having this other menu once you are done setting up your pop-up settings the conditions the triggers and advanced rooms you save and close so now we are done creating our pop-up having the local element and having our navigation element and also a call to action so next thing we have to do is to head back to our header and come right here the section that is going to display the navigation and that means it's the menu and we want that when someone clicks on this menu or this item it will pop up it will bring the menu pop-up so what you have to do is select this element come right here to because this is actually a button so you select the button element come right here to link select dynamic and come straight down here two actions there is an option that say it's pop-up so once you select that option it will show up down here and you select a pop-up that you want to open so you just say the action is supposed to be open and then a pop-up select the pop-up that you have created which is the mobile pop-up menu and then say update once you say update that means that now we have instructed our header on the mobile version that once we click on this section of our header it will pop up or it will bring up the pop-up mobile navigation element this is what happens this is the desktop version of the website the element or the section doesn't appear so now once we go to our mobile website which is actually going to display our mobile pop-up menu and once we click on the menu icon boom our mobile pop-up menu shows up and here it will also perfectly perform just like horizontal navigation that works on the main site for example if I go to the about page it will open up the board page once I'm done navigating around the about page I can just go back to the navigation click boom then I want now to check on the contact page and it takes me straight there and then the same time if I want to navigate to another page I just click here boom then I can decide to go back to the home page by simply clicking on the logo and straight head takes me so now if I take you to the live environment now this is a live environment where I'm not logged into the site I can just reload this and still it worked the same way so I can just click over here boom it shows up and I can advocate simply anywhere I want if I want to close the navigation just click over here if I want to check over again some other thing I just click on the contact maybe if that's what I want to check out I navigate through the whole page yeah I can even decide to click here on the logo just to go back on the home page I if I still just need to navigate through my navigation which is a pop-up this is how you do it that's how you create a mobile pop-up menu using elemental and elemental probe and it takes just a couple of steps just to recap you basically have to create the main navigation decide which elements you want to appear on the desktop version and the mobile version hide those elements and only reveal those that you want to reveal then go straight and create your pop-up once you finish creating your pop-up select the element that you want to display the navigation on click once you select it give it a dynamic link once you set that dynamic link go to actions pop-ups select the pop-up that you want to display and then don't forget to set up the pop-up conditions on display that means on the entire site on click and also on the devices that you want it to show up on so guys thank you so much for watching if you are new to this channel don't forget to hit the subscribe button and the mail icon so that you don't miss out on new other tutorials when I push them out and if you have any suggestions on any tutorials that I can make feel free to suggest them in the comment box below .
Ever wanted to trigger a unique menu for your mobile visitors?. Well, in this tutorial am going to show you how to create a mobile popup menu using elementor.
This video is not about creating responsive menus using popups but only to create different popup menu that shows up only on mobile devices.
The mobile popup menu is displayed once your mobile site visitors clicks on a specific element you set to display the menu popup.
All you need is elementor pro, then create your header and a unique section dedicated to display on mobile devices. Once set.
You’ll have to create your popup with all the elements you want to display. In this case, we added the website logo, menu navigation item and a call to action button.
When done, you simply have to add the display conditions for your popup menu. And this will be when and how it will be triggered.
Then you’ll have to set your header section to dynamically link to the created popup and set it to open on click.
Then you’ll be done and ready to go.
Follow the tutorial for the step by step process.
Get a Domain and WebHosting
(Use coupon code * GOTECHUG60 * for upto 60.5% off all plans)
Get Astra Theme –
Get Envato Elements ( Millions of creative digital assets):
Awesome Elementor Extensions (Addons)
Get Crocoblock Jet Plugins here:
Get Ultimate Addons for Elementor:
Get Essential Addons for Elementor:
Get Power Pack for Elementor here:
Get Premium Addons here:
Get Piotnet Addons for Elementor:
Get Smart Sliders 3 for Elementor:
Get The Plus Addons for Elementor:
Get Unlimited Elementor for Elementor:
Speed Up WordPress Site
Get LastPass Password Manager:
Hire on Fiverr (Get 20% off 1st Order):
*Join my monthly newsletter via blog*
*Follow GoTechUG on Social Media*
For business inquiries send to: email@example.com
*Snail Mail Address* (Send 'thank yous' and fan stuff)
Uganda, East Africa
DISCLAIMER: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission at NO extra cost to you. That way, it helps support this channel and make more videos just like this.