Create a responsive popup menu

Create a responsive popup menu that launches from a menu button in your site’s header.

You’ll learn how to create a menu popup that:

• Is engaging, functional, and beautiful
• Is responsive on mobile

---

Design The Popup And Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)
2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we’ll design our own, but you can also find this template in your Elementor Pro Popups Templates Library. Just search for “menu” in the Popups library to find it.

Popup > Layout Tab

1. Width: Set to 85vw
2. Overlay: Hide
3. Entrance Animation: Fade In
4. Animation Duration: 2 seconds

Popup > Style Tab

Popup

Box Shadow: Set these as you’d like.

Close Button

1. Vertical Position: 4
2. Color: Set the color to #878787
3. Size: 35

Popup > Advanced Tab

Prevent Closing On Overlay: Yes

---

Now, add a section with two columns.

Design The First Column

Section > Layout

1. Content Width: Full Width
2. Columns Gap: No Gap

Drag an Inner Section widget to the first column. 

Under Section > Layout > Columns Gap, set No Gap.

Under  Section > Advanced, set Padding of 70 px all around. 

Section > Advanced

Padding: 70 for top, bottom, left, and right.

---

Drag a Heading widget to the first column.

Under Style > Typography, set the size to 60, and under Weight set to 100.

Tip: Now is a good time to adjust the headings’ Mobile Settings.

---

Create The Rest Of The Menu Items

1. Right-click the Heading widget’s handle , and choose Duplicate.
2. Repeat the duplication for as many menu items as you’ll need.
3. Edit the Title text for each Heading widget to properly label each menu item

Add A Button To The Menu

Drag a Button widget below the menu items and style it to your liking.

Under the Advanced tab > Margin, Set to 70 for Top, and then click the responsive viewport icon, click the Mobile icon, and set Mobile’s margin to 40 for top.

---

Drag another Inner Section widget to the first column below the Button.

1. Under Section > Layout > Width, set Full Width.
2. Under Section > Layout > Columns Gap, set No Gap. 
3. Under Section > Advanced > Padding, set 30 for Top, 70 for Right, 50 for Bottom, and 70 for Left.
4. Now, right-click a column handle and select Delete to delete one of the columns, leaving you with just one.

---

Add Share Buttons To The Menu

Drag a Share Buttons widget (Pro) to the column.

Share Buttons > Content

1. Edit the social network items as needed.
2. Skin: Minimal
3. Alignment: Left

Share Buttons > Style

1. Button Size: 1
2. Color: Custom Color and choose Black (#000000)

---

Design The Second Column

Right-click the column’s handle to edit the column’s settings.

Column > Style

Background

1. Background Color: Set to #000000 (Black)
2. Second Color: Set to #000000 (Black)

Note: Although the new background color has been set, you won’t see it yet, because there is no content in the column yet.

Create The Newsletter Subscribe Call To Action Form

Drag an Inner Section widget to this column.

Right-click a column handle and select Delete to delete one of the columns, leaving you with just one.

Inner Section > Advanced

1. Margin: Set to 130 for Bottom only
2. Padding: Set to 70 for Top, 60 for Right, 70 for Bottom, and 60 for Left

Drag a Heading Widget into the column

Adjust the title text (ie Sign Up For Our Newsletter), and text size, color, etc. as needed.

Drag a Form Widget (Pro) under the heading

Form > Content

Form Fields

1. Click the X to the far right of the Name and Message fields, as we only need the Email for this example.
2. Input Size: Medium
3. Email > Content > Column Width: 80%

Submit Button

1. Size: Medium
2. Column Width: 20%
3. Alignment: Right
4. Icon: Long Arrow Right

Form > Style

Form

1. Column Gap: 0
2. Row Gap: 0

Field

1. Text Color: White
2. Background Color: Transparent
3. Border Color: White
4. Border Width: 1 for Bottom only
5. Typography > Size: 10

Button

1. Background Color: Transparent
2. Text Color: White
3. Border: Solid
4. Border Width: 1 for Bottom only
5. Border Color: White

Create The Products Display

Drag another Inner Section widget to this column below the form.

Inner Section > Advanced

1. Padding: Set to 30 for Right only

Responsive

1. Hide On Mobile: Hide

Inner Section > Layout

1. Columns Gap: No Gap

Right-click a column handle and select Delete to delete one of the columns, leaving you with just one.

Edit The Column

Column > Advanced

1. Margin: Set -60 (minus 60) for the Left only

Right-click the heading widget’s handle and copy the Newsletter Heading title and then paste it into this column

Heading > Style

1. Text Color: Black (#000000)
2. Weight: 700

Heading > Advanced

1. Margin: Set to 20 for Left only

Column > Style

Background

Color: White (#ffffff)

Border

1. Border Radius: 5 for all sides

Box Shadow (Normal)

1. Color: rgba(0,0,0,0.21)
2. Box Shadow > Horizontal: 0
3. Box Shadow > Vertical: 10
4. Box Shadow > Blur: 30
5. Box Shadow > Spread: -10 (negative 10)
6. Position: Outline

Box Shadow (Hover)

1. Color: rgba(0,0,0,0.21)
2. Box Shadow > Horizontal: 0
3. Box Shadow > Vertical: 15
4. Box Shadow > Blur: 40
5. Box Shadow > Spread: -10 (negative 10)
6. Position: Outline

Drag in an Image widget below the heading

Image

Don’t choose an image just yet

1. Image Resolution: Full
2. Alignment: Left

Now right-click the Heading widget’s handle , duplicate it and adjust the style for the duplicated widget.

Heading > Style

1. Size: 15
2. Weight: 300

Now change the wording for each.

Right-click the column handle and duplicate it twice so you have a total of 3 columns.

1. Edit the column for the middle and last columns, changing the margins in Column > Advanced to -40 for the Left margin in the middle column, and -20 for the Left margin in the last column.
2. For each column, edit the Image widget, choosing an image. Even .gif images work well here.
3. Adjust your text and margins as needed.

Adjust For Mobile

Edit each of the Inner Sections in the Left column

Inner Section > Advanced

1. Padding: 25 for all sides

Click the cog / gear icon  located at the bottom left of the panel to return to the Popup Settings.

Popup Settings > Layout

1. Width: 100vw

Form

Set the email field and Submit Button widths to 80% and 20%, respectively.

---

Set the Publish Options

Click the Publish button. There are no Conditions, Triggers, or Advanced Rules for this popup, so click the Save and Close button.

---

Edit Your Site’s Elementor-Created Header Template

Go to Templates > Theme Builder > Headers > Select your header, and click Edit with Elementor

Click your menu button widget’s handle to edit the widget, if it exists, or create a new one.

Button

1. Link: Click the Dynamic icon and select Actions > Popup
2. Click again on Popup and under Action, choose Toggle Popup
3. In the Popup field, search for and select the popup you just created

Click the Update button to save the Header template changes

All done. Go to your live site, click the Menu button in your header and see your new Menu popup in action.

Bonus: Add Entrance Animation effects on any of your widgets to add cool effects. Just edit a widget, go to its Advanced tab, choose one of the Entrance Animations listed there.