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 identify and select the underlying text element.
  • Temporarily lower the z-index of the covering element to access the text.
  • Toggle the visibility of the covering element to edit the text beneath.
  • Use the Layers Panel to directly select and edit the text layer.

Sometimes layers overlap in Webflow, making it difficult to select and edit underlying text. Here’s how you can access and edit the text even if it's covered by another layer.

​

1. Use the Navigator Panel

  • Open the Navigator Panel by clicking on the Navigator icon on the right side of the Webflow Designer.
  • Identify the Text Element you want to edit in the Navigator's hierarchical list of elements.
  • Select the Element by clicking on it directly in the Navigator.

​

2. Adjust Z-Index Temporarily

  • Select the Covering Element (the layer that's on top) using the Navigator or by clicking on it.
  • Go to the Style Panel and find the Z-Index or Position Style settings.
  • Lower the Z-Index Value temporarily, allowing you to access the text beneath.
  • Edit the Underlying Text, then reset the Z-Index to its original value once editing is complete.

​

3. Toggle Visibility of the Covering Element

  • Select the Covering Element using the Navigator.
  • Go to the Style Panel and find the Display Settings.
  • Set the Display to None temporarily to hide the covering element.
  • Edit the Background Text, then re-enable the covering element by changing the Display back to its original setting.

​

4. Use the Layers Panel

  • Open the Layers Panel from the interface if it's not visible.
  • Find and Select the Text Layer you need to edit.
  • Edit Directly Through the Layers Panel by selecting the layer and then using the Style or Element settings to make your changes.

​

Summary

To edit text hidden by another layer in Webflow, use the Navigator panel to select it directly, adjust the z-index of the overlapping element temporarily, toggle its visibility, or utilize the Layers Panel to gain access. All these methods provide a clear path to editing the desired text without interference from overlapping elements.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are the limitations of shape dividers in Webflow compared to Elementor?
Why do users receive a "Passwords cannot be collected" popup when attempting to log in or sign up on our published Webflow site?
What are some ways to optimize a large JSON file from an exported image sequence in Webflow?
How can I allow clients to easily style text in a Webflow collection, such as adding bold or italic styles, and changing text colors?
Does Webflow support video backgrounds and how can I troubleshoot if the video is not showing up on my site?
Where can I find Javascript code to make a GIF start animating on hover in Webflow?
Can I add rounded corners to Youtube videos and remove all icons except for the play button on the videos in Webflow?
Does anyone have experience using locomotive scroll to create sticky elements on a Webflow website? I'm looking to replicate the functionality shown on this website: [link]
How can I fix the issue of having a small amount of background image below the fold on mobile browsers in Webflow? I have tried using custom CSS and JavaScript codes, but it did not work.
Why doesn't my website/page link show an image when I copy/paste it into my Facebook status? Can someone assist me with this issue?
How can I create a dropdown menu in the hero section of a Webflow website that is preselected based on the ad that brought the user there?
Is there a way to display the full URL or slug as the link text in Webflow when creating a page with a list of collection item URLs?
How can I calculate a value from a number in a Webflow CMS collection, divide it by a fixed number, and use the resulting percentage as the width of a div for each item in the collection? Is there a way to do this without using CSS calc() or jQuery?
How can I organize the BEM styles in my Webflow site without needing to create combo classes and adjust properties in a specific order?
Does the built-in "Fade" Scroll into view Interaction work on mobile in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?