How can I remove the green color that appears when I select a section in the navigation bar for mobile on Webflow?
TL;DR
- Open Webflow Designer in mobile view, select the nav link, and open its Focus, Pressed, and Current states.
- Reset any green styles found in these states, then publish and test the site to confirm the highlight is removed.
When using Webflow's default navigation menu on mobile, a green highlight may appear when you select or tap a link — this is often due to a focus or active state style on the link element. To remove it:
1. Locate the Affected Navigation Link
- Open Webflow Designer and switch to mobile view (Tablet or smaller).
- Click the Navbar component, then open the Menu so you can edit the dropdown links.
- Select a Nav Link (typically a
Link BlockorText Link).
2. Check and Remove Focus/Pressed Styles
- With the link selected, go to the Selector dropdown in the Style panel.
- Change the state from None to Focus, Pressed, and Hover one at a time.
- If you see any styling like a green background, border, or text color, reset it:
- Click the blue style indicators (if active) to remove overrides.
- You can also manually change color to match the default or desired design.
3. Remove Active Page Styling (If Needed)
- If the green color only appears when you're on that page, it may be the Current state applied to that nav link.
- Select the link, change the selector to Current, and reset or change any green styling applied to that state.
4. Publish and Test
- Preview in Webflow to confirm changes worked.
- Then Publish the site and test on a mobile device or emulator to ensure the green selection highlight is gone.
Summary
To remove the green color on mobile nav links, check the Focus, Pressed, and Current states in the Style panel and reset any unwanted green styling. This ensures a clean, consistent appearance across devices.