Current state for multiple pages - no CMS

Hello WF,

I would like to ask you if it is possible to make the current state on a single nav link for multiple pages. Currently, the current state is generated by linking nav link to the current page.

For example
Mainpage / news (current state)
Main page / news (current state) / acticle |||||| On this subpage I would like to have current state on my nav link ‘‘news’’.

I am not using CMS!

Is it possible in Webflow?

You can do this with JS on the article page:

<script>
$(document).ready(function(){
 $('#your-nav-link-id').addClass('w--current');
});
</script>
4 Likes

@avivtech thank you for that script. I’m doing something wrong because it doesn’t work.

I’ve tried ‘#m_novinky’ and ‘m_novinky’

Put the script before the <body> tag

1 Like

My bad, thanks a lot! Works fine :heart:

1 Like

I modified the script a bit to get it fully working:

$(document).ready(function(){
  var path = window.location.pathname;
  var splitted = path.split('/');
  
  if (splitted.length >= 2 && splitted[1] === 'THE_NAME_OF_THE_PATH') {
    $('#THE_ID_OF_NAV_ITEM').addClass('w--current');
  }
});
3 Likes

Excuse me, don’t understand what should I write instead. Please, help

Ok, so the splitted[1] will always contain the first part of the path (after the initial slash). The if clause checks that is it equal with the path you want to highlight. E.g. with a path

example.com/stories/awesome-mug-of-morning-coffee

would give you

splitted = ["", "stories", "awesome-mug-of-morning-coffee"]

So when you are thinking of the NAME_OF_THE_PATH, you want it to be the first part of the path. In this case it would be

if (splitted.length >= 2 && splitted[1] === 'stories') { ... }

So with this you can highlight the stories link even though the user is on the subpage of it.

I hope this helps!

1 Like

i love u. this is exactly the simple solution I needed.

3 Likes