Webflow sync, pageviews & more.
NEW

How can I troubleshoot the issue with a slider image not being hidden on some pages in Webflow, even when the visibility condition is set to "hidden"?

TL;DR
  • Ensure conditional visibility is correctly configured and the image is within a valid CMS context for the logic to apply.
  • Check for conflicting styles, overrides from symbols or components, and any custom code or interactions that may affect visibility.
  • Publish and test the live site, as preview mode may not reflect conditional visibility based on CMS data.

If a slider image is not being hidden on certain pages even though you've set its visibility condition to "hidden", the issue is likely due to incorrect conditional visibility logic, override styles, or misplaced elements.

1. Check Conditional Visibility Settings

  • Select the image element within the Webflow Designer.
  • In the Element Settings panel (gear icon), review the Conditional Visibility settings.
  • Ensure the condition refers to the correct field (e.g., Hide if Current Page Name is not “Home”).
  • Remember, Conditional Visibility only works on Collection Pages or inside Collection Lists with valid CMS bindings.

2. Verify CMS Binding and Scope

  • If you're using a Collection List or Collection Page, make sure the slider image is properly bound to a collection item.
  • If the element is not inside a CMS context, visibility conditions based on CMS fields will not work.

3. Inspect Element Display Settings

  • Sometimes elements are hidden via CSS instead of visibility logic.
  • Select the image and check the Style panel: look for Display: none or Visibility: hidden. These styles might be applied from a combo class or global class override.

4. Check for Symbol Overrides or Reused Components

  • If you're using a Symbol that contains the slider, and placing it across different pages:
  • Conditional visibility inside a Symbol will not vary by page unless you use Overrides supported by the new Webflow Components system.
  • You must "detach" or use conditional logic outside the symbol to make it page-specific.

5. Inspect Custom Code or Interactions

  • Check if there is any custom JavaScript or interactions (like hide/show triggers) that override visibility logic.
  • Look in Page Settings → Custom Code or Project Settings → Custom Code.
  • Also, check the Interactions panel to see if any page load or scroll-based interactions affect image opacity or display.

6. Publish and Test Live Site

  • Conditional visibility does not appear in Preview mode if it's based on CMS or dynamic data.
  • Always Publish the site and test the issue on the live/staged domain to verify behavior.

Summary

Ensure your conditional visibility is correctly set based on CMS data, confirm the slider image is placed within a valid CMS context, and check that no CSS classes, symbols, or custom code are overriding display settings. Conditional visibility only works as expected when all rules are structurally valid and tested on the live site.

Rate this answer

Other Webflow Questions