{"id":22575,"date":"2019-02-19T10:00:29","date_gmt":"2019-02-19T10:00:29","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=22575"},"modified":"2025-12-05T13:03:02","modified_gmt":"2025-12-05T11:03:02","slug":"responsive-menu-popups","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/","title":{"rendered":"Create a Responsive Menu in WordPress Using Popups"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"22575\" class=\"elementor elementor-22575\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3aa00d8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3aa00d8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0176afc\" data-id=\"0176afc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ef7a6ba elementor-widget elementor-widget-text-editor\" data-id=\"ef7a6ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>One of the great advantages of our new <a href=\"https:\/\/elementor.com\/features\/popup-builder\/\">Popup Builder<\/a> 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 \u2013&nbsp;creating a menu that triggers popups!<\/p>\n<p><b>Here you can see the Apple-inspired popup mega-menu we will create in this tutorial:&nbsp;&nbsp;<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f38c1f6 elementor-widget elementor-widget-video\" data-id=\"f38c1f6\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/02\/tips_tricks-popup-menu-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-181ce84 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"181ce84\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f284365\" data-id=\"f284365\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1120e41 elementor-widget elementor-widget-text-editor\" data-id=\"1120e41\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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.<\/p><p>Alright, let\u2019s see how the magic is done.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9592392 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9592392\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-137187d\" data-id=\"137187d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8844e64 elementor-widget elementor-widget-heading\" data-id=\"8844e64\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Add a Popup Template\u200b<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1aaf753 elementor-widget elementor-widget-text-editor\" data-id=\"1aaf753\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the dashboard, click on Templates &gt; Add New and choose Popup.<br \/>Name it and click Create <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26741\">Template<\/a>.\u00a0<br \/>Then you&#8217;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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9899be1 elementor-widget elementor-widget-image\" data-id=\"9899be1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"483\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=483\/blog\/wp-content\/uploads\/2019\/02\/library-popup.png\" class=\"attachment-large size-large wp-image-22620\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800\/blog\/wp-content\/uploads\/2019\/02\/library-popup.png 800w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/02\/library-popup-300x181.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/02\/library-popup-768x464.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-03b7397 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"03b7397\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7a65da4\" data-id=\"7a65da4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-af9903a elementor-widget elementor-widget-heading\" data-id=\"af9903a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Adjust the Settings<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc54c01 elementor-widget elementor-widget-text-editor\" data-id=\"dc54c01\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the Popup Settings, change the width of the popup.<br \/>Switch Overlay to Hide, and under Entrance Animation choose Fade In. Set its duration to 2 seconds.<\/p><p>Under Style you can design the Box Shadow settings.<br \/>Under Close Button set the vertical position, and change the color &amp; size.<\/p><p>In the Advanced tab, choose\u00a0Prevent Closing on Overlay. This sets where you can close the popup \u2013 Either on any part of the screen or only on the X or the button.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf7e1e3 elementor-widget elementor-widget-image\" data-id=\"bf7e1e3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=449\/blog\/wp-content\/uploads\/2019\/02\/02.png\" class=\"attachment-large size-large wp-image-22621\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800\/blog\/wp-content\/uploads\/2019\/02\/02.png 800w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/02\/02-300x168.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/02\/02-768x431.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8851000 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8851000\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-825538a\" data-id=\"825538a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d91399a elementor-widget elementor-widget-heading\" data-id=\"d91399a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Designing the Left Column<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5774b21 elementor-widget elementor-widget-text-editor\" data-id=\"5774b21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add a section with 2 columns. Under Columns Gap choose No Gap.\u00a0<\/p><p>Inside the left column, drag in an Inner Section widget and add some padding.<\/p><p>Drop in a Title widget and adjust your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26742\">typography<\/a> &amp; size.\u00a0<\/p><p>This time start off with mobile,\u00a0so that later you can duplicate it, and it will already be all set.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d39c919 elementor-widget elementor-widget-image\" data-id=\"d39c919\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=449\/blog\/wp-content\/uploads\/2019\/02\/mobile01.png\" class=\"attachment-large size-large wp-image-22623\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800\/blog\/wp-content\/uploads\/2019\/02\/mobile01.png 800w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/02\/mobile01-300x168.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/02\/mobile01-768x431.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-368fd8b elementor-widget elementor-widget-text-editor\" data-id=\"368fd8b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Duplicate the title.\u00a0<\/p><p><b>Note:<\/b> Here we are not using the Nav Menu, just the Title to create the menu.<br \/>Add a button widget, and edit the\u00a0button\u2019s text and style, color, border, etc.<\/p><p>Next, add a margin on the top, also in mobile.\u00a0Tweak the text size, bottom padding, etc.<\/p><p>Now, add another Inner Section and add some padding.\u00a0Then, inside the Inner section add and design the share buttons \u2013 Alignment, size, custom color.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-00c8252 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"00c8252\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d757968\" data-id=\"d757968\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a48012f elementor-widget elementor-widget-heading\" data-id=\"a48012f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Designing the Right Column\u200b<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-affd72d elementor-widget elementor-widget-text-editor\" data-id=\"affd72d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s design the other side:<\/p><p>In the right column, the color is changed, but it is only visible once content is added.<br \/>Add an inner section, and adjust the padding &amp; margin.<br \/>Drag in a Title widget and design it.<br \/>Now, add a Form widget for users to sign up for the newsletter.\u00a0<br \/>We just need their email, so let&#8217;s delete all the other fields, and fine-tune the size, icon, color, etc.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8605adb elementor-widget elementor-widget-image\" data-id=\"8605adb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=449\/blog\/wp-content\/uploads\/2019\/02\/04.png\" class=\"attachment-large size-large wp-image-22622\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800\/blog\/wp-content\/uploads\/2019\/02\/04.png 800w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/02\/04-300x168.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/02\/04-768x431.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-831b1c4 elementor-widget elementor-widget-heading\" data-id=\"831b1c4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Displaying Products<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9b589d elementor-widget elementor-widget-text-editor\" data-id=\"d9b589d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To display 3 products add another Inner Section widget, add padding, but here, slide Hide for mobile to make it visible only on desktop &amp; tablet.\u00a0<\/p><p>Here, a minus margin will shift your column to the left, making it stand out more.<\/p><p>Copy the title and paste it.\u00a0Change the column color to white, border radius &amp; box shadow, also on hover.\u00a0Drag in an image and there you go.<\/p><p>Now, go back to the text and change its weight, margin and duplicate it.<\/p><p>Edit the text. Then,\u00a0duplicate the column three times and change each individual margin, to create a space between the columns.<\/p><p>Add a photo. Notice\u00a0you can use video, gifs or regular images. Polish your text and set the margins. Use the Preview mode to check how it looks.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-22d04e7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"22d04e7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f6c4860\" data-id=\"f6c4860\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e1c26e6 elementor-widget elementor-widget-heading\" data-id=\"e1c26e6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 6: Edit on Mobile<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3ad834 elementor-widget elementor-widget-text-editor\" data-id=\"b3ad834\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, design all your items for mobile, adjust the padding.<\/p><p>In Settings, under Width, increase the VH size to 100,\u00a0so that the popup fits the entire screen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-032e550 elementor-widget elementor-widget-image\" data-id=\"032e550\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=449\/blog\/wp-content\/uploads\/2019\/02\/mobile02.png\" class=\"attachment-large size-large wp-image-22624\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800\/blog\/wp-content\/uploads\/2019\/02\/mobile02.png 800w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/02\/mobile02-300x168.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/02\/mobile02-768x431.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e62b72c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e62b72c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-25e51ac\" data-id=\"25e51ac\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1a084fb elementor-widget elementor-widget-heading\" data-id=\"1a084fb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 7: Set the Conditions<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abe1a92 elementor-widget elementor-widget-text-editor\" data-id=\"abe1a92\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Click Publish and the conditions window will open.<\/p><p>This time, no changes are needed to the Conditions, Triggers, and Advanced Rules \u2013 This only applies to popups that are triggered by buttons. Then save and close.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-39642e5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"39642e5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-480b9ac\" data-id=\"480b9ac\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-feeda11 elementor-widget elementor-widget-heading\" data-id=\"feeda11\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 8: Define a Manual Trigger\u200b\u200b<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f15ee48 elementor-widget elementor-widget-text-editor\" data-id=\"f15ee48\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now, let\u2019s define how to open your popup by going to your site\u2019s Header.\u00a0<\/p><p>Press the button Menu and in Content &gt; Link &gt; Dynamic choose Popup.<br \/>Click again on Popup and under action choose Toggle Popup to make the\u00a0button to both open and close the popup. In Popup, choose your popup and save.\u00a0<\/p><p>You can test it on your live page by clicking on the button to open &amp; close the popup, and that&#8217;s it!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9a9061 elementor-widget elementor-widget-image\" data-id=\"c9a9061\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=449\/blog\/wp-content\/uploads\/2019\/02\/menu-btn.png\" class=\"attachment-large size-large wp-image-22627\" alt=\"Hamburger Menu\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800\/blog\/wp-content\/uploads\/2019\/02\/menu-btn.png 800w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/02\/menu-btn-300x168.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/02\/menu-btn-768x431.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-050e9c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"050e9c1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d7ffe1f\" data-id=\"d7ffe1f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d789311 elementor-widget elementor-widget-heading\" data-id=\"d789311\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 9: Add Entrance Animation<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6f2e41 elementor-widget elementor-widget-text-editor\" data-id=\"f6f2e41\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here&#8217;s a chance to learn another trick \u2013 Add some entrance animation to add some spice.\u00a0<\/p><p>Copy these settings to paste the style for each one.<\/p><p>Back to the live page. Click the button menu.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bbfdb9d elementor-widget elementor-widget-video\" data-id=\"bbfdb9d\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/02\/tips_tricks-popup-menu-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d11a1f4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d11a1f4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5044017\" data-id=\"5044017\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ba904e7 elementor-widget elementor-widget-heading\" data-id=\"ba904e7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Summary<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e820100 elementor-widget elementor-widget-text-editor\" data-id=\"e820100\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>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!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.<\/p>\n","protected":false},"author":53499,"featured_media":22765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-22575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create a Responsive Menu in WordPress Using Popups<\/title>\n<meta name=\"description\" content=\"How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Responsive Menu in WordPress Using Popups\" \/>\n<meta property=\"og:description\" content=\"How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-19T10:00:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-05T11:03:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matan Naveh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matan Naveh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\"},\"author\":{\"name\":\"Matan Naveh\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558\"},\"headline\":\"Create a Responsive Menu in WordPress Using Popups\",\"datePublished\":\"2019-02-19T10:00:29+00:00\",\"dateModified\":\"2025-12-05T11:03:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\"},\"wordCount\":848,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Inspiration\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\",\"url\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\",\"name\":\"Create a Responsive Menu in WordPress Using Popups\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png\",\"datePublished\":\"2019-02-19T10:00:29+00:00\",\"dateModified\":\"2025-12-05T11:03:02+00:00\",\"description\":\"How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inspiration\",\"item\":\"https:\/\/elementor.com\/blog\/category\/inspiration\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Create a Responsive Menu in WordPress Using Popups\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558\",\"name\":\"Matan Naveh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g\",\"caption\":\"Matan Naveh\"},\"description\":\"Matan started his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 15 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/matannaveh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Responsive Menu in WordPress Using Popups","description":"How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/","og_locale":"en_US","og_type":"article","og_title":"Create a Responsive Menu in WordPress Using Popups","og_description":"How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.","og_url":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-02-19T10:00:29+00:00","article_modified_time":"2025-12-05T11:03:02+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png","type":"image\/png"}],"author":"Matan Naveh","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Matan Naveh","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/"},"author":{"name":"Matan Naveh","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558"},"headline":"Create a Responsive Menu in WordPress Using Popups","datePublished":"2019-02-19T10:00:29+00:00","dateModified":"2025-12-05T11:03:02+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/"},"wordCount":848,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png","keywords":["Build","Video"],"articleSection":["Inspiration"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/responsive-menu-popups\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/","url":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/","name":"Create a Responsive Menu in WordPress Using Popups","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png","datePublished":"2019-02-19T10:00:29+00:00","dateModified":"2025-12-05T11:03:02+00:00","description":"How can a single click open a beautiful menu popup? Follow this guide and see how easy it is with Elementor Popup Builder.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/responsive-menu-popups\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/02\/Cover-2019.02.20-Create-a-Responsive-Menu-Using-Popups.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/responsive-menu-popups\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Inspiration","item":"https:\/\/elementor.com\/blog\/category\/inspiration\/"},{"@type":"ListItem","position":3,"name":"Create a Responsive Menu in WordPress Using Popups"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558","name":"Matan Naveh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g","caption":"Matan Naveh"},"description":"Matan started his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 15 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.","url":"https:\/\/elementor.com\/blog\/author\/matannaveh\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/22575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/53499"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=22575"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/22575\/revisions"}],"predecessor-version":[{"id":146736,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/22575\/revisions\/146736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/22765"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=22575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=22575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=22575"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=22575"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=22575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}