Streaming live at 10am (PST)

Where is the "w--current"-class coming from and how do I stop it from overriding my chosen style?

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:

  1. 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).
  2. 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.

Thanks in advance!

@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 yourwebsite.com/about, 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.

Thanks a lot for the response.

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)?

Screen Shot 2020-08-26 at 20.12.09

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:

image

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.

I’ve been on a page that the element points to this entire time.

I still don’t understand where exactly I’m supposed to be able to change this “Current” pseudo-element.

I showed you a screenshot of my Selector-dropdown. It only has “None”, “Hover”, “Pressed”, “Focused” and “Visited”.

Where do I change “Current” for this link block?

When you select the link element do you see the “Current” combo class?

I’m happy to take a look at the specific situation if you don’t mind sharing your read-only link.

Ok, I managed to find the cause of the problem.

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.

@danq ah, I see. I didn’t know that about symbols and the current state not showing up. Glad to hear you were able to figure it out :slight_smile: .