How can I remove the green color that appears when selecting a section in the navigation bar for mobile on Webflow?
- Check the nav link's "Current" or "Active" state in Webflow and remove any green styling.
- Add
* {-webkit-tap-highlight-color: transparent;}in Custom Code to disable mobile browser tap highlights. - Inspect hover, focus, and active states for green styling and remove as needed.
The green highlight on mobile navigation in Webflow usually comes from browser-specific styling for links or active states (especially on iOS or Android browsers).
1. Check for Active or Current States
- Select the nav link in question within the Webflow Designer.
- Look at the top of the Style panel to see if it says “Current” or “Active”.
- Check the color settings under Background or Text color for the "Current" state and remove or update the green color there.
2. Override Tap Highlight Color for Mobile
Mobile browsers sometimes apply a default tap highlight color (most commonly green or blue on Android). To neutralize this:
Go to Page Settings or Project Settings > Custom Code (in the
<head>or<body>section).Add inline CSS to override the browser’s tap highlight. Use:
* {-webkit-tap-highlight-color: transparent;}
This disables the green flash on tap for all elements. If you only want to target specific elements (like .nav-link), adjust accordingly.
3. Inspect on Device or Responsive Mode
- Use Webflow's preview in mobile view or test directly on a device.
- If you're specifically targeting mobile interactions, Webflow Designer alone may not reveal browser-specific styling behaviors.
4. Check Hover/Focused States
- Even on mobile, browsers can apply :hover, :focus, or :active styles.
- Select your nav link and check those states in Webflow's Style panel.
- If needed, manually unset any green color applied in those states.
Summary
To remove the green highlight on mobile nav links: check for a “Current” class applying the color, disable browser tap highlighting with -webkit-tap-highlight-color: transparent;, and remove any green set in hover or focus states.