Seemingly Random "Current" Class... Help Understanding

Hi There,

Here is my public share link: https://preview.webflow.com/preview/dev-highlands?preview=a1bbd78014939b25d90974184a0b15ff

Section in Question: NEWS page, click on the very first “category” link.

You’ll see that I have a “current” class attached to a basic text link that sits just outside of a dynamic link list for my blog categories. My structure for my category navigation that holds my category links has a section, then a div with a class of “Cat_Links_Wrapper”, then inside of that is a single basic “text link”, then the actual dynamic link list that pulls in the category links to filter each post by a category.

The categories are setup as a single-reference data collection, and didn’t seem to have built in functionality to show “all” or “all categories”, or “all of a single reference thing” when setting up the dynamic list… So I just added my own basic text link that essentially directs to the main news page (default NEWS page) that shows all posts by default with some css making the category links look as if they are all one thing.

This is EXACTLY what I needed, I just don’t understand the Webflow sorcery going on here. I wanted/needed to “highlight” the current state of the category navigation depending on which page the end user is on. Somehow Webflow knew to magically do this for me, I just don’t understand how it is doing this given the explanation of the structure above. The first link is not a part of the dynamic link list, and seems to be the only one I can access the “current” state on. When I navigate to the categories template page for a specific link (such as category template:ideas, etc…) I don’t have access to this “current” state. I just feel like its something I stumbled upon and would like to know how it’s all working for future reference.

Is it because I’ve given that first “basic” text link (that essentially just links to the exact same page the user is currently on, the main NEWS page showing all posts) the same class as the dynamic links, and all dynamic link lists have a “current” class by default? Any help understanding how Webflow magically knew, and pulled it in for me would be appreciated.



Hi @Mogeek,
As I can see from published site link, everything is working great.

You styled “category link” class for normal, hovered and current states on some static element (It easier to do on static object, actually). Then when you apply this class to dynamic object it reacting the same way as on static.
So yes, it is how Webflow magic happen :smile:

Regards,
Anna

Hi Sabanna,

Thanks for chiming in but I’m still a little lost as to exactly when I have access to a current class. I know I do with certain widgets (nav, tabs, “anchored” links , etc…) - but in this instance I can’t figure out how I magically got a “current” class.

What are all the instances in which Webflow will automagically kick out a “current” class. I’ve added plenty of standard “text link” blocks into projects, and never before was given a “current” class. In this case it’s a standard “text link” block, then directly underneath in the html tree a dynamic link list, with the same class applied to the single “outside” link, and 4 “auto” links… Can any of the @webflow staff chime in to clarify?

Thanks for an explanation in advance.

The current class is applied when the link matches the link you are currently on.

For example if you have a text link called “home” and it is linked to your home page then when you are on the home page the current class will be applied.

Once you set the link and navigate to that page the current class becomes available to style.

This also applies to anchor links.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.