How can I edit a text in Webflow when it is covered by another layer and cannot be selected in the background?
TL;DR
- Use the Navigator panel to select and edit hidden text layers directly.
- Alternatively, hide the covering element temporarily using Display: None to access and edit the obscured text.
If text is visually covered by another layer in Webflow and cannot be selected directly on the canvas, you can still access and edit it in several ways.
1. Use the Navigator Panel
- Open the Navigator (press F or click the Navigator icon in the left toolbar).
- Locate the blocked text element in the structure tree. It may be within a Section, Div Block, or another wrapper.
- Click the element’s name to select it directly, even if it’s not accessible on the canvas.
- Once selected, you can edit the text directly from the Settings Panel and Style Panel, or double-click the text on canvas if it becomes editable.
2. Use the Layers Menu Shortcut
- Right-click on the higher layer that’s covering the text (on the canvas).
- Choose Select Parent Element or navigate backward using the breadcrumb navigation bar at the top of the canvas.
- You can keep selecting parent elements until you reach the desired text element beneath.
3. Hide the Blocking Element Temporarily
- If you recognize the covering layer, select it from the Navigator.
- In the Style Panel, set Display to "None" temporarily to hide it.
- Now return to the canvas and select the text beneath.
- Once editing is done, switch Display back (e.g., to Flex or Block) for the previously hidden layer.
4. Rename Layers for Easier Future Access
- In the Navigator, double-click the default layer names (like “Div Block 27”) and give them meaningful names (e.g., “Modal Overlay” or “Hero Text”).
- This makes it easier to navigate the hierarchy in future edits.
Summary
Use the Navigator panel to select the text directly, or temporarily hide the overlapping layer by setting it to Display: None. This allows you to edit obscured content without disrupting the design structure.