Create a Responsive Menu in WordPress Using Popups

How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.

One of the great advantages of our new Popup Builder is that you can apply any Elementor widget that you like inside the popup, and create unique functionalities. This is exactly what this tutorial will demonstrate – creating a menu that triggers popups!

Here you can see the Apple-inspired popup mega-menu we will create in this tutorial:  

The menu is triggered when the user clicks on the hamburger icon. This tutorial is just the tip of the iceberg in terms of what can be accomplished following the same steps: menus with forms, images, sliders and more.

Alright, let’s see how the magic is done.

Step 1: Add a Popup Template​

In the dashboard, click on Templates > Add New and choose Popup.
Name it and click Create Template. 
Then you’ll get the view of our library (with more than a 100 popups to choose from), but close it so you can create it from scratch.

Step 2: Adjust the Settings

In the Popup Settings, change the width of the popup.
Switch Overlay to Hide, and under Entrance Animation choose Fade In. Set its duration to 2 seconds.

Under Style you can design the Box Shadow settings.
Under Close Button set the vertical position, and change the color & size.

In the Advanced tab, choose Prevent Closing on Overlay. This sets where you can close the popup – Either on any part of the screen or only on the X or the button.

Step 3: Designing the Left Column

Add a section with 2 columns. Under Columns Gap choose No Gap. 

Inside the left column, drag in an Inner Section widget and add some padding.

Drop in a Title widget and adjust your typography & size. 

This time start off with mobile, so that later you can duplicate it, and it will already be all set.

Duplicate the title. 

Note: Here we are not using the Nav Menu, just the Title to create the menu.
Add a button widget, and edit the button’s text and style, color, border, etc.

Next, add a margin on the top, also in mobile. Tweak the text size, bottom padding, etc.

Now, add another Inner Section and add some padding. Then, inside the Inner section add and design the share buttons – Alignment, size, custom color.

Step 4: Designing the Right Column​

Let’s design the other side:

In the right column, the color is changed, but it is only visible once content is added.
Add an inner section, and adjust the padding & margin.
Drag in a Title widget and design it.
Now, add a Form widget for users to sign up for the newsletter. 
We just need their email, so let’s delete all the other fields, and fine-tune the size, icon, color, etc.

Step 5: Displaying Products

To display 3 products add another Inner Section widget, add padding, but here, slide Hide for mobile to make it visible only on desktop & tablet. 

Here, a minus margin will shift your column to the left, making it stand out more.

Copy the title and paste it. Change the column color to white, border radius & box shadow, also on hover. Drag in an image and there you go.

Now, go back to the text and change its weight, margin and duplicate it.

Edit the text. Then, duplicate the column three times and change each individual margin, to create a space between the columns.

Add a photo. Notice you can use video, gifs or regular images. Polish your text and set the margins. Use the Preview mode to check how it looks.

Step 6: Edit on Mobile

Now, design all your items for mobile, adjust the padding.

In Settings, under Width, increase the VH size to 100, so that the popup fits the entire screen.

Step 7: Set the Conditions

Click Publish and the conditions window will open.

This time, no changes are needed to the Conditions, Triggers, and Advanced Rules – This only applies to popups that are triggered by buttons. Then save and close.

Step 8: Define a Manual Trigger​​

Now, let’s define how to open your popup by going to your site’s Header. 

Press the button Menu and in Content > Link > Dynamic choose Popup.
Click again on Popup and under action choose Toggle Popup to make the button to both open and close the popup. In Popup, choose your popup and save. 

You can test it on your live page by clicking on the button to open & close the popup, and that’s it!

Step 9: Add Entrance Animation

Here’s a chance to learn another trick – Add some entrance animation to add some spice. 

Copy these settings to paste the style for each one.

Back to the live page. Click the button menu.

Summary

As this tutorial demonstrates, you can open popups from any kind of button on your page. This option enables you to be creative and explore new popup applications. Go ahead, give it a spin!

Liked This Article?

We have a lot more where that came from! Join 639,479 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Matan Naveh
Matan Naveh
Matan is a Content Manager at Elementor. He worked as an Editor-in-Chief for various websites, as well as a Radio Broadcaster and Editor.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

45 Responses

  1. Question: Does this menu type create any page load issues? I moved away from a great looking mega menu because it affected my load time.

    Looks great!

    1. It shouldn’t affect your page load time. You can use a page speed tool online and compare. If there is any impact, please let us know.

      1. Popups with button triggers shouldn’t necessarily hurt your score. It’s typically the intrusive popups that are the problem. My bigger concern with this menu system (I haven’t built one with Elementor yet) is whether the source code will be properly structured. If anyone has a demo with this already built, that would be useful to go into and view.

    1. My thoughts exactly. The video even calls out “not” using a nav, rather headings to build the menu.

      I have a use case where the client wants a fullscreen megamenu takeover, but I need this to be semantically correct for an HTML nav. What are the implications here?

  2. This is SUPER legit – never thought of using the popup builder for this purpose but it works well! Is there a way to kinda darken the screen behind the popup – kinda like a lightbox background?

  3. Great video! Can I somehow animate the hamburger menu icon on click? I need a smooth transition from hamburger to close button.

  4. How can I create a blog post template which included a featured video in top of the blog post?

    That would be a cool thing to find out.

    Thanks for your help!

  5. Like Aurora, POPUP isn’t listed as one of my template options. I selected it under Elementor>Settings, but it still isn’t a template option. Can you help with this?

  6. What are the search indexing implications if I put my menus inside of the popup, and use a hamburger trigger? So, instead of the header template with a nav inside, I’d have a header with a hamburger which triggers a megamenu style pop-up with my navs. I’m wondering if the schema will work out properly – especially for rich search results.

    1. I think I’ll put a mobile version of the nav in the actual header and hide it on all screen sizes except mobile. Then, on mobile, I’ll hide the pop up.

      This would allow me to place the full, semantic nav structure in the header and — hopefully — use a schema plugin to help Google understand. Plus, use a site map. Not sure if this works for the markup, but I’ll try it.

      These pop-ups are so nice.

  7. Hi Matan,
    While this is a wonderful idea to use an existing feature in a creative new way, it really doesn’t replace the functionality of a “mega menu”, as the bold title of the newsletter that promoted this post suggested.
    A mega menu is highly needed and should have functionalities that the pop-up just doesn’t and probably shouldn’t have.
    Carry on the great work!

  8. The tutorial is the only one that the instructor keeps saying Ect. and goes so fast through the info it’s very hard to follow. The product looks great. The tutorial not so much.

  9. Awesome way to make a menu, except I do not have the option to create popups? Thought this was included in my pro subscription? And yes – I have the latest version of the plugin?

  10. I have a problem with this, I can’t seem to make it float over the header/nav section. Any particular setting that might fix this. FYI we are using Jupiter X and have also the Elementor PRO. The heading is designed with the Elementor PRO templates

  11. It’s running fine, it looks very good. Adding links to each text, goes to mentioned section id (in background) but is not auto closing. It still remain in front after click. Should I add something more to make it disappear? I’m using Astra theme. Thanks in advance for your advice…

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 639,479 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.