How can I remove the green color that appears when selecting a section in the navigation bar for mobile on Webflow?

The green highlight appearing when selecting a section in the navigation menu on mobile in Webflow is likely caused by the default focus or active link styling. Here’s how to remove it:

1. Check Link Styling in Webflow Designer

• Go to the "Navigator" panel and select the navigation links inside the mobile menu.
• Select the "Current" state under the "States" dropdown if the green appears when a section is active.
• Look for any background color, text color, or border color applied and remove or adjust it.

2. Ensure No Focus or Active Styles Are Applied

• Click on the navigation links and inspect their styling under States:
• Focus: This applies styling when the link is clicked.
• Active: This applies styling to the current active section.
• Visited: Check if a visited state is causing a color change.
• If any unwanted colors are applied, remove them by setting colors to "transparent" or inheriting from the parent element.

3. Override Styling Using Custom CSS

If Webflow’s built-in settings don’t remove the green highlight, add a small custom CSS rule:

• Go to "Project Settings" → "Custom Code" and add this under the <style> tag in the "Footer Code" section:
  ```css
  a:focus, a:active { outline: none !important; background: none !important; }
  ```
• Publish your site and check if the color is removed.

4. Test on Various Devices

• Try clicking the navigation links on an actual mobile device to ensure changes take effect.
• Inspect in Webflow’s preview mode and live site to confirm the fix works properly.

Summary

The green highlight in the mobile navigation likely comes from Webflow’s Focus or Active states. First, check and remove any unwanted colors in the Designer’s Styles panel. If needed, add custom CSS to remove focus/background styling. Finally, test on different devices to confirm the fix.