Webflow sync, pageviews & more.
NEW

How can I edit text that is hidden by other sections in Webflow? I'm new to Webflow and struggling to find a solution in the editor. Thank you for your help!

TL;DR
  • Use the Navigator panel to directly select hidden text elements without interacting with overlapping layers.
  • Temporarily hide or adjust the Display, Z-index, or positioning of overlapping elements, and enable X-ray Mode or zoom out to visually reveal and edit the text; revert changes afterward.

If you're trying to edit text that is visually hidden behind overlapping sections in Webflow, you’ll need to adjust your workspace to access it properly. Here’s how to do it:

1. Use Navigator Panel for Direct Access

  • Open the Navigator panel (left sidebar icon that looks like layered rectangles).
  • Locate the element or section containing the hidden text.
  • Click on the specific text element in the Navigator to select it directly, bypassing overlapping layers.

2. Temporarily Hide Obstructing Elements

  • Select the section or element that’s covering the text (like a sticky navbar or another div block).
  • In the Style panel, go to the Display property and set it to None temporarily.
  • You can now click and edit the hidden text.
  • After editing, set the Display back to its original value (e.g., Block or Flex).

3. Use the X-ray Mode

  • Activate X-ray Mode in the top toolbar (eye icon labeled “X-ray”).
  • This dims overlapping layers, letting you visually locate and select the hidden text element more easily.

4. Adjust Z-Index or Positioning Temporarily

  • If needed, lower the Z-index of the covering section or adjust position settings (e.g., change from Fixed to Static) to reveal the text beneath.
  • Make sure to note and revert these changes after you've completed your edits.

5. Zoom Out or Resize Canvas to Gain Access

  • Use the zoom slider at the bottom right of the canvas to zoom out and get a better view of layering issues.
  • You may also resize browser or canvas breakpoints to shift how elements appear, which can sometimes expose hidden content.

Summary

To edit text hidden behind other sections in Webflow, use the Navigator panel for precise selection, or temporarily hide/fade overlapping sections. Optionally, enable X-ray Mode to help visually isolate elements. Always revert changes to structure or style after editing.

Rate this answer

Other Webflow Questions