I have a link block which I’ve given a unique class (let’s say “link-one”) with a height of 3em, but when I look at the published website, my specified height is being overridden by a CSS class called w–current which also has a height specified.
Since the w–current-class is being added to my original class (i.e. .link-one.w–current), it gets a higher specificity in the CSS and thus overrides my specified height.
My questions are:
Where is this “w–current”-class coming from? I know that some classes have a “Current”-state, but for the link block-element I can’t find it anywhere in the sidebar (or elsewhere for that matter).
How can I make sure that this w–current-class isn’t overriding my height?
I’d prefer to discuss this in the abstract since I can’t share my project.
@danq yes, you were thinking in the right direction. The ‘w-current’ class is the class webflow applies to the ‘current’ link, that’s a link you’ve clicked and you’re now seeing. IE I clicked the link to the about page in a navigation and I’m now on Fastest Web Hosting Services | Buy High Quality Hosting, the ‘about’ link in the navigation now has the ‘w-current’ class applied. You should be able to change the ‘current’ state and change the height there.
So what you’re saying is that any link element that points to the page that is currently active will receive the “w–current”-class?
If that’s the case, then shouldn’t I be able to select the “Current”-state in the “Selector”-dropdown, the way you normally would be able to with other elements (where the “Current”-option tends to appear in green)?
In order to modify the w-current class, you’ll need to navigate to an element on page where that style is shown—so in @sarahfrison’s example, that would be the About page. This combo class will then be shown in green within the selector field:
The dropdown in this field is only for a handful pseudo classes, and since w-current is a combo class it may be a little out of place there. That said, I agree that we should have a quicker way to access this class.
If you have some votes left, there’s a Wishlist item requesting the same functionality that you may want to throw your support behind.
To anyone reading this who’s experiencing the same problem, my link block was located inside a symbol with its URL determined by a symbol instance override link field, and apparently if an URL has been set using an override field, it won’t be registered as pointing to the same page.
For that reason, the “Current”-state never appeared in the selector-list when I was working with the link block, and I ended up having to create a link block outside of the symbol’s scope in order to be able to see its “Current”-state.
In addition, for some strange reason “All Links” also wouldn’t appear for the link block. I don’t know why, but that’s maybe a side note that might help anyone who’s reading this.
but… this w–current thing, which is inserted with the current state of a nav link, leads to much confusion. Reading this forum i noticed many others struggle with this.
My question: Why is this ‘feature’ built this way, and after many posts here, some dating from 2017, has this not been addressed.
.