Current pseudo classes on sub pages

Design help General
1

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:

2

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

Thanks in advance.
Will

3

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

4

Thanks Sam.

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

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

5

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.

6

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

7

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.

8

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?

9

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
10

I’m all set and re-publushed.

11

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

12

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

13

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