Current pseudo classes on sub pages

Hello.

I have the same issue but find myself scratching my head.

I’ve built my main nav using a navbar element and set it as a symbol site wide. I’d like to keep the pseudo ‘Current’ class for any sub pages within each section.

Do I have to rebuild my site nav using something dynamic instead to achieve this?

If so, can anyone link me a tutorial, I’m stuck.

Thanks
Will

Continuing the discussion from Current Nav state for multiple pages:

I should add, I’m just building a basic prototype so I just want the quickest solution possible.

Thanks in advance.
Will

Please post both your public share link AND published link, so we can see what you have done so far.

Thanks Sam.

Public Share Link
https://preview.webflow.com/preview/nhs-orkney?preview=eb988aac1a7147056c7cd35a1bdf024d

Published link
http://nhs-orkney.webflow.io,

Your public share link is not working.

I’m assuming all the sub-pages are manually created and are not collection items?
It would be easier if you could move all the sub-pages into a folder so that the URL becomes something like
/services/services-page and /patients/patient-page.

Hi Sam,

I was thinking about doing that, I’ll update and repost. I’m not sure why the public share link isn’t working. It was the one generated by clicking the share button.

Here’s a regenerated one…
https://preview.webflow.com/preview/nhs-orkney?preview=7c58dcb6647d8aebaed305fec0b8d52a

Thanks again.
Will

Move the parent pages back to the root (no folders).

Example:

/services - Parent page with link in the menu
/services/services-page - Child page in the subfolder, subfolder has with same slug as parent page /services

Re-publish your site.

OK, all done and re-published.

The pseudo ‘Current’ class still doesn’t stick on the child pages. Is there another step I’m missing?

Now, based on your current setup, paste this in Site Settings > Code > Footer Code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
var curUrl = location.pathname;
  $('a').each(function() {
    $(this).toggleClass('w--current', curUrl.indexOf($(this).attr('href')) != -1);
  });
});
</script>
4 Likes

I’m all set and re-publushed.

Apologies, there was a bad space in the code, which I have fixed. It should just work.

You’re a star, all working perfectly. Much appreciated.

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