How to highlight main nav tab while clicking through the subnav links?

Hello guys,

I’m struggling to highlight (black rect border) the main nav tab “Projects” while I’m clicking through the list of tabs in right sidebar menu. How to make “Projects” main nav tab highlighted persistently while the user is clicking through sidebar tabs?

Thanks in advance :wink:

test

One approach is to use Webflow’s built-in interactions. You could set up an interaction on the “Projects” nav tab that triggers when any of the sidebar tabs are clicked. This interaction can add a class to the ““Projects”” tab that styles it with your black rectangular border.
Another idea is to play around with the custom code section if you’re comfortable with a bit of coding. A small script could ensure that clicking a sidebar tab triggers the highlight on the “Projects” tab.

1 Like

Thanks, but problem here is that I can’t apply the “current” state to tab of the instance I wish to. So if the user is clicking through the sidebar nav items, the project tab in the horizontal nav should be always highlighted.

So, this problem can’t be fixed by using interactions, cause in my case the main horizontal menu and sidebar menu are different components interactions feature works only within the same component. I needed to add own JS code to fix this problem. The JS is simply adding a new CSS class to the “Projects” tab in the main menu as the user is clicking through the sidebar menu, it cause the “Projects” tab in main menu always highlighted as the user is clicking links in the sidebar menu.