How can I remove the green color that appears when I select a section in the navigation bar for mobile on Webflow?
TL;DR
- Add custom CSS in Project Settings > Custom Code (Footer Code section) to set
outline: nonefora:focus, a:active. - In Webflow’s Designer, go to the States dropdown, select Focus/Active, and set outline to none in the Style panel.
- Publish changes, test on mobile, and clear the browser cache if the highlight persists.
When clicking a navigation link in Webflow's mobile menu, a green highlight may appear due to Webflow’s default focus styles or user agent styles. You can remove this using custom CSS.
1. Add Custom CSS to Remove the Green Highlight
Go to Project Settings > Custom Code.
In the Footer Code section, add the following inside
<style>tags:```css
a:focus, a:active {
outline: none !important;
}
```Save changes and Publish your project.
2. Modify Webflow’s Built-in Focus Styles
- Select the nav link in Webflow’s designer.
- In the Style panel, go to the States dropdown (top-right) and choose Focus.
- Set outline to none under the Borders section.
- Repeat for Active state if needed.
3. Test on Mobile
- Open your site on a mobile device and click a navigation link.
- If the green highlight is still visible, clear the browser cache and refresh.
Summary
Remove the green highlight by adding outline: none in Custom Code and adjusting the Focus/Active states in Webflow’s Style panel. Test on mobile to confirm it’s gone.