You're seeing a black background on the nav button after clicking it because the Current state styling for the link is not fully overridden, or the style is being inherited incorrectly.
1. Understand the “Current” State in Webflow
- Webflow automatically assigns a “Current” class to a link that matches the current page URL.
- This is used for styling only that link on that page — for example, to highlight the active menu item.
2. Check the “Current” Class and Its Styles
- Navigate to the affected nav link on the actual current page.
- Select the link, and you’ll see a label like Nav Link (Current) in the Style panel.
- Review the styles applied under this state.
- Watch for any background color—a black background is likely set here.
- Delete or change the background color property under this "Current" state.
3. Check for Interactions or Hover States
- With the nav link selected, open Interactions > Element Trigger panel.
- Ensure there is no animation on “Click” or “Tap” that might be changing the background.
- Also check :Hover, :Pressed, and :Focused states—a dark color may be there that doesn’t reset after click.
4. Look for Conflicting Global Styles
- Ensure global styles (like Typography or All Links) aren’t setting a background color unintentionally.
- If styles are applied to All Links, they could be affecting the “Current” state when clicked.
5. Safari/Browser-Specific Rendering (If Applicable)
- If the black background only appears briefly when clicking (especially in Safari), it may be due to auto-tap highlight behavior.
- To fix, add a transparent highlight style using a small embed with:
* { -webkit-tap-highlight-color: transparent; }
Summary
The black background likely comes from a style applied to the Current state of the nav link. Select the link on the actual current page, check for background color under “Nav Link (Current)” in the Style panel, and clear or modify it. Also review interactions or state styling like Hover or Click if the issue persists.