How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
TL;DR
- Inspect the element using Developer Tools to identify the applied "w-current" class.
- Override height with a more specific CSS rule in Page Settings > Custom Code, using
.your-class.w-current { height: 100px !important; }. - Manually reapply height in Webflow’s Designer if possible.
- Use custom JavaScript to dynamically enforce height if needed.
The "w-current" class in Webflow is automatically added to navigation links that match the current page's URL. This can sometimes override your custom styles, such as height settings on a link block. Below are steps to prevent this issue.
1. Inspect and Identify the Issue
- Open Developer Tools (Right-click on the element > Inspect).
- Look for "w-current" in the class list to see which styles it applies.
2. Override the Height Using a More Specific Selector
In Webflow, add a custom CSS rule to enforce your height settings:
Go to Page Settings > Custom Code > Inside