✅ Elementor Guide: Using the Navigator to Find Hidden or Overlapping Sections #

🧭 What is the Navigator? #

The Navigator in Elementor is a panel that shows the full structure of your page (sections, containers, columns, widgets).
It helps you find hidden elements, overlapping sections, or items that are hard to click on visually.

---

🪜 Step-by-Step Guide #

✅ Step 1: Open the Elementor Editor #

1. Log in to WordPress.

2. Go to Pages → Edit with Elementor.

3. Make sure you are in the visual editor view.

---

✅ Step 2: Open the Navigator Panel #

You can open the Navigator in two ways:

🔹 Method 1 (Right-click) #

1. Right-click anywhere on the page.

2. Click Navigator from the menu.

🔹 Method 2 (Keyboard Shortcut) #

• On Windows: Ctrl + I

• On Mac: Cmd + I

👉 The Navigator panel will appear on the left side.

---

✅ Step 3: Understand the Navigator Structure #

The Navigator shows the hierarchy of your page:

• Sections / Containers

• Columns (if using old layout)

• Widgets (text, buttons, forms, images, etc.)

You will see nested layers with indentation.

---

✅ Step 4: Find Hidden or Overlapping Elements #

1. Expand each Section/Container by clicking the arrow.

2. Look for:

   • Sections that are hidden on desktop/mobile/tablet

   • Containers with negative margins

   • Widgets that appear outside the visible layout

3. Click on any item in Navigator to select it on the page.

👉 Even if you can’t click the element visually, you can select it here.

---

✅ Step 5: Identify Overlapping Sections #

1. Click through sections in the Navigator.

2. When selected, Elementor will highlight it on the page.

3. Check:

   • Advanced → Margin & Padding

   • Advanced → Positioning (Absolute/Fixed)

   • Z-index values

These often cause overlapping issues.

---

✅ Step 6: Rename Layers for Easy Navigation (Optional) #

1. Right-click a section or widget in Navigator.

2. Click Rename.

3. Give it a clear name like:

   • “Hero Section”

   • “Hidden Popup Banner”

   • “Footer CTA Button”

👉 This helps when debugging complex pages.

---

✅ Step 7: Hide or Delete Problem Elements #

🔹 To Hide: #

1. Select the element.

2. Go to Advanced → Responsive.

3. Enable Hide on Desktop / Tablet / Mobile.

🔹 To Delete: #

1. Right-click the element in Navigator.

2. Click Delete.

---

✅ Pro Tips for Debugging Overlapping Issues #

• Check Z-index conflicts (Advanced → Layout).

• Check Position = Absolute or Fixed (these often overlap).

• Look for negative margins.

• Toggle Responsive Mode (desktop/tablet/mobile icons) to find hidden mobile-only layers.

---

✅ When to Use Navigator #

Use Navigator when:

• You can’t click an element

• Something is covering your content

• The page looks broken

• Hidden popups or containers exist

• Debugging mobile layout issues