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

TL;DR
  • Open Webflow Designer and locate the navigation menu with the green color issue.
  • Select the navigation link, change to Focus state in the Style panel, and remove or adjust the green color.
  • Preview the changes and publish the site to update them live.

When viewing your website on mobile, a green color appears upon selecting a section in the navigation bar. To remove this, you'll need to adjust some settings in Webflow’s Designer.

​

1. Access Webflow Designer

  • Open Webflow and navigate to your project.
  • Select the Designer from the Dashboard to access the visual interface.

​

2. Modify Navigation Item Styles

  • In the Designer, locate the navigation menu where the green selection color appears.
  • Select the navigation link with the green color issue.

​

3. Change Focus State Styling

  • With the link selected, open the Style panel on the right side.
  • At the top of the Style panel, find the dropdown that says "States" and change from "None" to "Focus".

  

4. Remove or Adjust Green Color

  • Check the background color settings under this Focus state.
  • Remove or change the green color by clicking on the color swatch and setting it to transparent or your preferred color.

​

5. Preview and Publish

  • Preview the changes by clicking on the eye icon at the top left.
  • If satisfied with the changes, return and publish your site to apply these adjustments live.

​

Summary

To remove the green color appearing on mobile navigation links in Webflow, adjust the Focus state settings for those links in the Designer’s Style panel. Set the background color to transparent or choose a different color, then preview and publish your site for changes to take effect.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I implement reCAPTCHA v3 on my Webflow sites?
How can I ensure that the dates and times in the dynamic collections on my Webflow site appear correctly in French and Arabic? Additionally, how can I add an RTL code for my Arabic site?
Is it possible to effectively manage subscriptions on a Webflow website using a hosted checkout from Stripe or PayPal, as an alternative to the Webflow eCommerce plan? Any limitations or drawbacks to be aware of?
How can I find the Theme Name of a website developed using Webflow?
Can I host custom .css and .js files on Webflow for specific projects, such as using the Slick plugin for sliders on my Webflow project?
How can I integrate Stripe with Webflow and ensure it works properly?
Can I add a span with a class within a h4 tag in the Webflow editor or do I need to edit the code manually?
Can Webflow interactions be used to create a vertical side menu that slides in on mouse hover, reveals submenus when icons are clicked, and hides automatically when the cursor is moved away?
How can nofollow tags be added to individual links in Webflow?
Can Webflow be integrated with a custom-built NodeJS backend for creating a custom UI widget based on server responses?
Can the x-frame settings in Webflow be edited to allow my site to be displayed in an iframe?
How can I change the color of a button on my side nav in Webflow when it is pressed and its landing page is opened?
What would be a better setup for migrating our copywriter app from Bubble to Webflow, considering our requirements for saving user-generated content and potential limitations with Airtable's number of records?
How can I create a Category Collection Page in Webflow that only displays articles related to a specific category, without affecting other category pages?
How can I center a column in a Div or Container in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?