What is preventing the "Current" text from changing color on the mobile version of my Webflow site when clicked?
TL;DR
- Check the "Current" nav link on mobile breakpoints and ensure it has the correct text color assigned.
- Confirm it's not being overridden by other states (like Hover or Pressed), styles from other breakpoints, interactions, or hidden by elements such as overlays.
If the "Current" text (typically a navigation link) is not changing color on mobile when clicked, it's likely due to style overrides or mobile-specific styles in Webflow.
1. Check Navigation Link States
- Webflow automatically adds a "Current" class to nav links that point to the current page.
- Go to the mobile breakpoint (e.g., 768px and below) and select one of the nav links.
- Check if the link has the "Current" state active (look in the Selector dropdown near the top of the Style panel).
- Make sure the style for the "Current" state includes the desired text color.
2. Inspect Active and Current Styles
- In Webflow, a link may have multiple states: Normal, Hover, Pressed, Focused, Visited, and Current.
- The "Current" state overrides Normal styles, but may be overridden by Pressed or Hover on interaction.
- Check that the "Current" state style isn't accidentally set to the same color as the background or surrounding elements on mobile.
3. Review Mobile-Specific Style Overrides
- Styles can be different per breakpoint. Go to the mobile view (e.g., phone portrait) and:
- Select the link with the “Current” tag, not just any nav item.
- Confirm it does not inherit styles from other breakpoints that you have accidentally overridden on mobile.
4. Inspect Display Settings
- On mobile, if the mobile menu is collapsed, links may not visually change due to their display or interaction behavior.
- Ensure that the link is not covered by another element or styled in a way that blocks visual feedback (e.g., a transparent menu overlay).
5. Check for Interactions or Custom Code Interference
- If you’re using Webflow interactions or custom code, especially for links or navigation, these may override default behaviors.
- Disable interactions temporarily to test if the link color updates correctly when clicked.
Summary
To fix the issue, ensure that your "Current" navigation link has the correct text color set at mobile breakpoints, and that no other state or style is overriding it. Also, verify interactions or overlays aren’t interfering with the visual change.