Steps to Add a Popup Menu to the Header in the Woomen Theme

A Pop Menu is an interactive menu that appears dynamically when a user clicks on a designated menu element in your website header. It allows you to showcase multiple organized lists, images, or categories in a stylish popup format.

In this guide, we’ll walk through the process of creating, designing, and assigning a Pop Menu using Elementor with the Woomen Theme.

Step 1: Create a New Pop Menu Template

1. Go to your WordPress Dashboard.

2. Navigate to WP Theme Builder.

3. Click Add New Template.

4. From the available template options, select Pop Up.

5. Name it (e.g., Pop Menu).

6. Enable Pop Menu functionality and make sure it’s displayed across the entire site for consistency.

7. Save your changes—you’ll be redirected to Elementor.

Step 2: Design the Pop Menu in Elementor

Once inside Elementor:

• Add a Container and set it to Full Width.

• Insert a Tabs Element to create menu sections (e.g., Shoes, Jeans, Shirts, Trousers).

• Adjust settings to:

  • Position tabs (top, side, or bottom).

  • Align them (e.g., center).

  • Customize width, spacing, and line titles.

Styling Options:

• Set background colors (normal, hover, and active states).

• Customize title colors for each state.

• Adjust typography (font size, style, line height, spacing).

Step 3: Add Content Inside Tabs

For each tab, you can add different elements:

• Images: Showcase product visuals (e.g., add a shoe image in the Shoes tab).

• Lists: Display item features or categories (e.g., Italian handmade shoes, Quality leather).

• Headings: Label each section (e.g., “Quality”).

• Containers: Organize layouts horizontally or vertically using flex settings.

This flexibility lets you build a visually engaging, fully functional pop menu.

Step 4: Add Close Button

To ensure good UX, add a Close Button:

1. Insert an Icon Widget (e.g., window close icon).

2. Adjust size, color, and margin.

3. Position it at the top (left or right as preferred).

Step 5: Assign the Pop Menu to the Header

1. Edit your Header with Elementor.

2. Select the designated Menu Button where the pop menu should open.

3. Go to the Advanced Tab → Add CSS ID.

Now, go back to your Pop Menu template:

• Open Post Settings → Pop-up Options.

• Choose Trigger Method (e.g., On Click).

• Select Position (e.g., Top Left).

• Copy the generated Pop-up Trigger ID.

• Replace the existing CSS ID in your header with this new ID (make sure to remove the # symbol).

• Save & Publish.

Step 6: Test the Pop Menu

• Refresh the Front-End Page.

• Click the menu button → Your newly created Pop Menu should now appear.

• Check that images, lists, and headings display properly.

• Verify the Close Button works.