What is preventing the "Current" text from changing color on the mobile version of my Webflow site when clicked?
TL;DR
- Check if the "Current" class styles are overriding link color on mobile breakpoints in Webflow Designer.
- Review all link states (Pressed, Focused) and clear inherited styles from larger breakpoints.
- Ensure no custom interactions or code prevent styling and test on a real mobile device after publishing.
If the "Current" link color isn't changing on your mobile version after being clicked, it's likely due to how Webflow handles link states or overrides on breakpoints.
1. Understand the "Current" Class in Webflow
- Webflow automatically applies the "Current" class to a Nav Link or Link Block when it matches the current page.
- The "Current" state is different from hover, pressed, or focused states.
- The styles set on the "Current" class override standard styles for that element on that page.
2. Check Styles in the Mobile Breakpoint
- Go to the mobile portrait or mobile landscape view in Webflow Designer.
- Select the nav link in question and confirm if it shows the "Current" label next to its class in the Style panel.
- If the "Current" class is overriding color settings here, it will persist regardless of click interactions.
3. Confirm Style Hierarchy for States
- Click the dropdown at the top of the Styles panel (where it says "None", "Hover", etc.) and check the "Pressed" and "Focused" states to see if any color is applied.
- Also, check if a style is set for "Current" on mobile breakpoint that overrides changes during interaction.
4. Look for Interaction or JavaScript Conflicts
- Confirm you're not using any custom interactions or JavaScript that could prevent the visual state from updating.
- Verify that no custom style override is applied through an embed or ClassCombo that fixes the color statically.
5. Test on a Real Device
- Webflow’s preview isn’t always accurate. Publish the site and test on an actual mobile browser.
- Some changes may only apply once Webflow’s live code executes upon user interaction.
6. Clear Inherited Styles
- If styles were defined on a higher breakpoint (like Desktop), they may carry over unless explicitly overridden.
- On the mobile breakpoint, remove or redefine the color for the "Current" nav link to ensure it's not inherited.
Summary
The color of a "Current" nav link may not change on mobile due to specific styles applied to the "Current" class, either on the mobile breakpoint or inherited from a larger breakpoint. Check your mobile-specific styles, state-specific overrides (Pressed or Focused), and test on a real mobile device after publishing.