"Current" class for top level dropdown

I am using dropdown menus in my navbar to simplify navigation. What I’m trying to do is change the appearance of the top level toggle whenever you are on a page that is one of its children. If anyone knows of a way to accomplish this I would appreciate some advice. I’ve attached a share link for reference.

Share Link

Add a class to the element and if it is Current, meaning directs to the page you are currently on, this will show up and you can customize it for the current class.

Hope this helps.

This issue has to do with the page not being the current page. I’m trying to get it so that I can apply a custom class to the dropdown toggle itself where its appearance will change whenever the user is on one of the pages in the dropdown list.

Been asked before here and here and here.

The custom script you need depends on your nav structure.

In your case you are using a dropdown component, the text of the dropdown does not supports an active state - only links can.

1 Like

Hello, @lago.

For being able to style the CURRENT state, you will have to have a LINK.

So, you can highlight the text of the dropdown toggl and click on the link option

Then, when you will have a link, you can give it a class and in the link settings connect it to the page which you want it to be current. Then go to that page and style that link in the CURRENT state.

@samliew Your script from this thread worked perfectly for what I was trying to do. Thanks for your help.

Thanks a lot. I used your last suggestion, which was very easy to set up: http://forum.webflow.com/t/current-pseudo-classes-on-sub-pages/29625/8

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