Styling "Current" state with custom code

That’s a neat trick I just found out.

Webflow has a “Current” state to, for example, style the menu item that is opened - you have “about us, work, contact”, you click on “work”, the page open, and the item “work” will be styled differently.

But you can’t that easily style it with custom css… not anymore!

If you type something like:

.menu--item:current { color: blue; }

it won’t work.

What you have to do is select your item in Webflow, where it shows the “Current” state, then just make a change there. Can be invisible like setting background to transparent… whatever, doesn’t matter. But then it will activate a special class created by webflow called “.w–current” that will be applied to the current element (with some custom javascript generated by webflow).

now you can type something like

.menu--item.w--current { color: blue; }

and it will work!
You can use elements like :after or :before, do whatever you want!

cheers!

2 Likes

Just what I was looking for, thank you Pieter!