To prevent the "w-current" class in Webflow from overriding the height of your custom class on a link block element, you can use some targeted CSS techniques.
Here's a step-by-step guide:
1. Identify the hierarchy: Determine the specific selector that adds the "w-current" class to the link block element. You can inspect the element using your browser's developer tools or navigate to the Styles panel in Webflow.
2. Override with a more specific selector: Create a custom CSS rule with a more specific selector to override the height set by the "w-current" class. For example, if the link block element has a class of "my-link-block," you can create a rule like:
```css
.my-link-block.w-current {
height: inherit !important;
}
```
In this example, the !important declaration ensures that your custom height value takes precedence.
3. Place the CSS code: In Webflow, you have a few options to add custom CSS:
a. Add inline styles: You can directly add the custom CSS rule within the link block element's style attribute. To do this, select the link block element, navigate to the Styles panel, and in the element's settings, click on the "+ Inline" button beside "Style."
b. Add in the page head: If you want to apply the CSS rule to multiple link block elements or keep the code separate from the element itself, you can add the CSS rule to the Page Settings. Go to the Page Settings by clicking on the gear icon in the Pages panel and then move to the "Custom Code" tab. In the "Head Code" section, insert your CSS code wrapped in `